携程网首页增加返回顶部按钮，监听window滚动事件

ctrip-mobile/css/index.css

@@ -29,6 +29,7 @@ a {
   max-width: 540px;
   top: 0;
   left: 50%;
+  z-index: 999;
   -webkit-transform: translate(-50%);
   transform: translateX(-50%);
   border-top: 1px solid #ccc;
@@ -286,4 +287,16 @@ nav {
 }
 .row a img {
   width: 100%;
+}
+
+/* 返回顶部 */
+.goBack {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 38px;
+  height: 38px;
+  background: url(../images/back.png) no-repeat;
+  background-size: 38px 38px;
 }

ctrip-mobile/index.html

@@ -237,5 +237,7 @@
       </div>
     </div>
   </div>
+  <!-- 返回顶部 -->
+  <div class="goBack"></div>
 </body>
 </html>

ctrip-mobile/js/index.js

@@ -75,7 +75,20 @@ window.addEventListener('load', function () {
       ul.style.transition = "all .3s";
       ul.style.transform = "translateX(" + left +"px)";
     }, 2000);
-    console.log(111);
-    
   });
+
+    // 返回顶部模块制作
+    var goBack = document.querySelector('.goBack');
+    var nav = document.querySelector('nav');
+    window.addEventListener('scroll', function () {
+      //pageYoffset是被卷去的头部，offsetTop是离顶部的距离
+      if(window.pageYOffset >= nav.offsetTop){
+        goBack.style.display = 'block';
+      }else{
+        goBack.style.display = 'none';
+      }
+    });
+    goBack.addEventListener('click', function () {
+      window.scroll(0, 0);
+    })
 })