トップ淘宝網の模造効果
要件：ボタンの上部一定の位置に固定された特定の位置サイドバーにスクロールバーの表示に戻り、そして特定の位置まで後退。動的にボタンをスライド上にページの最上部をクリックして、速度が遅いために、高速からアップスライド。
アイデア：
1、ページはjsのコードを実行するためにロードされました
JSコードは、最もに書き込むことができる（この例では、これが有する上部バックです）
トップには、以下の2つの書き込みに使用することができます。
①window.onload=関数（）{...}
②window.addEventListener（ '負荷'、関数（）{...}）
2、要素が使用する必要があります取得
3、結合事象はスクロールをスクロール
ロールバナーが固定された状態のサイドバーになっていることと、ユーザーモジュール
1 IF（window.pageYOffset> = bannerTop）{ // window.pageYOffset画面がから巻き上げられる
2 「固定」sliderbar.style.position =; // ときにユーザモジュールロールバナーが固定された状態のサイドバーとなります
3 sliderbar.style.top sliderbarTop + = 'PX' ;
4 } 他{
5。 sliderbar.style.position = '絶対' ;
6 sliderbar.style.top = '300ピクセルによって' ;
7 }
ときに、ユーザディスプレイモジュールの主ロールトップボタン
1 IF（window.pageYOffset> = MAINTOP）{ // とき表示ボタントップユーザモジュールメインロール
2 goBack.style.display = 'ブロック' ;
3 } 他{
4。 goBack.style.display = 'なし' 。
5 }
4、バインドクリックイベントをクリック
ページが動的なスライドトップのトップに戻ります]ボタンをクリックした後、遅いの速いからスピードアップスライド
1 sliderbar.addEventListener（ 'クリック'、関数（）{
2 アニメーション（ウィンドウ、0 ）;
3 }）
図5に示すように、アニメーション関数アニメーションに（OBJ、ターゲット、コールバック）
ここでは、ウィンドウでオブジェクトobj; 0であるターゲット宛先、コールバックは、コールバック関数で、上院を通過しなかった場合、あなたは無視することができますが
タイマーがのsetInterval（）を設定されています。
ステップ値としてステップを宣言、10（ステップにより分割スクロールバー差の現在の位置へ戻る位置の値が小さく、小さなを取得する、スクロール速度を遅くする高速からスクロールバーの速度を達成するために遅いなっていますアップスリップ）
VaRのステップ=（ターゲット- window.pageYOffset）/ 10。
ステップが整数でない場合でも、ステップは、任意の更なるDiudiuを行くためにスクロールバーを作ることができ、常に整数ではありません。あなたはスライドアップすることができ、ステップがゼロより小さくてもよいので、スクロールバーの下、ゼロよりも大きくすることができます。切り上げゼロより大きく、切り捨てはゼロ未満であります
ステップ=ステップ> 0？Math.ceil（ステップ）：Math.floor（ステップ）。
window.scroll（x、y）の特定の場所を文書化するためにスクロールし、タイマー機能は、各スリップ1時を呼び出します
window.scroll（0、window.pageYOffset +ステップ）。
決定したアニメーションが終了したか否か、タイマーてclearInterval（オフならば、それは）終了します。
1 IF（ターゲット== window.pageYOffset）{ // 場合後部の上部にページバック（即ち、アニメーションの実行終了）クリアタイマ
2 てclearInterval（obj.timer）;
3 // コールバック関数を渡すかどうかを判定する
。4 / * IF（コールバック）{
5。 コールバック（）;
6 } * /
7 //は、この以下に短縮することができます。オペレータが短絡されている&&、コールバックコールバック（すなわち、真の最初の式のために）（）が存在し続けるであろう
。8 コールバック&& ;コールバック（）
9。 }
次のように詳細なコードは次のとおりです。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>返回顶部效果</title>
8 <style>
9 .slider-bar {
10 position: absolute;
11 left: 47%;
12 top: 300px;
13 margin-left: 600px;
14 width: 45px;
15 height: 130px;
16 background-color: pink;
17 cursor: pointer;
18 }
19 .w {
20 width: 1100px;
21 margin: 10px auto;
22 }
23 .header {
24 height: 150px;
25 background-color: purple;
26 }
27 .banner {
28 height: 250px;
29 background-color: skyblue;
30 }
31 .main {
32 height: 1000px;
33 background-color: yellowgreen;
34 }
35 span {
36 display: none;
37 position: absolute;
38 bottom: 0;
39 }
40 </style>
41 </head>
42 <body>
43 <div class="slider-bar">
44 <span class="goBack">返回顶部</span>
45 </div>
46 <div class="header w">头部区域</div>
47 <div class="banner w">banner区域</div>
48 <div class="main w">主体部分</div>
49
50 <script>
51 // querySelector() 方法返回匹配指定选择器（）的第一个元素，传的必须是字符串
52 var sliderbar = document.querySelector('.slider-bar');
53 var banner = document.querySelector('.banner');
54 var bannerTop = banner.offsetTop; // banner模块距离顶部的长度
55 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度
56
57 var main = document.querySelector('.main');
58 var goBack = document.querySelector('.goBack');
59 var mainTop = main.offsetTop; // main模块距离顶部的长度
60
61 // scroll 屏幕发生滚动事件时执行
62 document.addEventListener('scroll', function() {
63 if(window.pageYOffset >= bannerTop) { // window.pageYOffset 屏幕被滚上去的距离
64 sliderbar.style.position = 'fixed'; // 当用户滚到banner模块时使侧边栏变为固定状态
65 sliderbar.style.top = sliderbarTop + 'px';
66 } else {
67 sliderbar.style.position = 'absolute';
68 sliderbar.style.top = '300px';
69 }
70
71 if(window.pageYOffset >= mainTop) { // 当用户滚到main模块时显示返回顶部按钮
72 goBack.style.display = 'block';
73 } else {
74 goBack.style.display = 'none';
75 }
76
77 });
78 sliderbar.addEventListener('click', function() {
79 animate(window, 0);
80 })
81
82 /* 动画函数：
83 * obj 做动画的对象（这里就是指window）
84 * target 目标位置（顶部）
85 * callback 回调函数（没有传参的话就不执行）
86 */
87 function animate(obj, target, callback) {
88 clearInterval(obj.timer); // 先清除定时器，保证只有一个定时器在执行，以免出现bug
89 obj.timer = setInterval(function() {
90 // window.pageYOffset距离顶部的距离（是负的）
91 var step = (target - window.pageYOffset) / 10; // step步长（让页面速度逐渐变慢的滑动上去）
92 step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整
93 if(window.pageYOffset == target) { // 当页面回到顶部后(即动画执行完) 清除定时器
94 clearInterval(obj.timer);
95 // 判断是否传了回调函数
96 /* if(callback) {
97 callback();
98 } */
99 // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
100 callback && callback();
101 }
102 // window.scroll(x, y) 滚动到文档特定位置
103 window.scroll(0, window.pageYOffset + step);
104 }, 15);
105 }
106 </script>
107 </body>
108 </html>