这几种方法帮你快速实现回到页面顶部

  • 这几种方法帮你快速实现回到页面顶部已关闭评论
  • 214 次浏览
  • A+
所属分类:Web前端
摘要

当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。


背景介绍

当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。

如今在我们浏览网站的时候,常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种,一种是直接回到页面的顶部,这种方式简单粗暴;另外一种则是自动滚动间接回到页面顶部,这样一来视觉体验上可能更好,但是用户需要过几秒才能看到顶部内容。

例如掘金,在滚动到一定高度时会出现“回到顶部”按钮,点击后会直接回到页面顶部,就是上文说到的第一种情况。

实现

动态显示滚动按钮

“回到顶部”并不是一直显示的,而是滚动到一定值才出现的,因此应该在window.onscroll里定义一个判断事件。

window.onscroll = function () {   var currentHeight =     document.documentElement.scrollTop ||     window.pageYOffset ||     document.body.scrollTop;   // 页面滚动超过300px就显示   if (currentHeight > 300) {     document.getElementById('backtop').style.display = 'block'   } else {     document.getElementById('backtop').style.display = 'none'   } } 

直接回到顶部

锚点

最简单的方法。给顶部的div一个id,点击直接回到这个div元素,但是URL上会出现#top。

<div id="top"></div> ...... <a href="#top">回到顶部</a> 

scrollTo函数

控制滚动条回到指定位置,第一个参数是距离页面左端的距离,第二个参数是距离页面顶部的距离。

<a href="javascript:scrollTo(0, 0)">回到顶部</a> 

scrollTop函数

控制滚动条垂直偏移。

<a onclick="byScrollTop()">回到顶部</a> ...... function byScrollTop() {   document.documentElement.scrollTop = 0;   window.pageYOffset = 0; // 兼容ios   document.body.scrollTop = 0; // 兼容低版本ie } 

scrollBy函数

该方法可把内容滚动指定的像素数。第一个参数指向右滚动的像素,第二个参数指向下滚动的参数,负数可使方向相反。

<a onclick="byScrollBy()">回到顶部</a> ...... function byScrollBy() {   var topHeight =     document.documentElement.scrollTop ||     window.pageYOffset ||     document.body.scrollTop;   scrollBy(0, -topHeight); } 

间接回到顶部

定时器实现滚动动画

通过定时器实现固定速度的自动滚动动画效果。但是这样会有个问题,就是当页面内容十分多的时候,这个时候离顶部已经有很长一段距离了。如果还是一个固定速度的话,可能会长达10秒钟,这对用户体验来说是不友好的。

<a onclick="scrollToTop()">回到顶部</a> ...... function scrollToTop() {   var topHeight =     document.documentElement.scrollTop ||     window.pageYOffset ||     document.body.scrollTop;   scrollBy(0, -100);   // 模拟鼠标向上滚动事件   scrolldelay = setTimeout('scrollToTop()', 50);   // 清除滚动事件,避免无法向下移动   if (topHeight === 0) {     clearTimeout(scrolldelay);     scrolldelay = null;   } } 

定时器实现滚动动画-改良版

基于上面这个问题,我们可以设置一个速度的最小值,让滚动速度从快到慢,但也不至于过慢。

function scrollToTop() {   var topHeight =     document.documentElement.scrollTop ||     window.pageYOffset ||     document.body.scrollTop;   var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;   scrollBy(0, -speed);   // 模拟鼠标向上滚动事件   scrolldelay = setTimeout('scrollToTop()', 50);   // 清除滚动事件,避免无法向下移动   if (topHeight === 0) {     clearTimeout(scrolldelay);     scrolldelay = null;   } } 

最终效果

这几种方法帮你快速实现回到页面顶部

完整代码

<style>     a {         display: block;     }      #top {         height: 2000px;         background-color: #999     }      #backtop {         display: none;         position: fixed;         bottom: 20px;         right: 30px;         background-color: #fff;         z-index: 9;     } </style>  <body>     <div id="top">         这里是页面顶部     </div>     <div id="backtop">         <a href="#top">回到顶部-锚点</a>         <a href="javascript:scrollTo(0, 0)">回到顶部-scrollTo函数</a>         <a onclick="byScrollTop()">回到顶部-scrollTop函数</a>         <a onclick="byScrollBy()">回到顶部-scrollBy函数</a>         <a onclick="scrollToTop()">回到顶部-定时器动画版</a>     </div>     <script>         window.onscroll = function () {             var currentHeight =                 document.documentElement.scrollTop ||                 window.pageYOffset ||                 document.body.scrollTop;             console.log(currentHeight, "currentHeight");             if (currentHeight > 300) {                 document.getElementById('backtop').style.display = 'block'             } else {                 document.getElementById('backtop').style.display = 'none'             }         }          function byScrollTop() {             document.documentElement.scrollTop = 0;             window.pageYOffset = 0; // 兼容ios             document.body.scrollTop = 0; // 兼容低版本ie         }          function byScrollBy() {             var topHeight =                 document.documentElement.scrollTop ||                 window.pageYOffset ||                 document.body.scrollTop;             scrollBy(0, -topHeight);         }          function scrollToTop() {             var topHeight =                 document.documentElement.scrollTop ||                 window.pageYOffset ||                 document.body.scrollTop;             var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;             scrollBy(0, -speed);             // 模拟鼠标向上滚动事件             scrolldelay = setTimeout('scrollToTop()', 50);             // 清除滚动事件,避免无法向下移动             if (topHeight === 0) {                 clearTimeout(scrolldelay);                 scrolldelay = null;             }         }     </script> </body>