这几种方法帮你快速实现回到页面顶部
背景介绍当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况,“回到
背景介绍 当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。 如今在我们浏览网站的时候,常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种,一种是直 ...
背景介绍
当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。
如今在我们浏览网站的时候,常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种,一种是直接回到页面的顶部,这种方式简单粗暴;另外一种则是自动滚动间接回到页面顶部,这样一来视觉体验上可能更好,但是用户需要过几秒才能看到顶部内容。
例如掘金,在滚动到一定高度时会出现“回到顶部”按钮,点击后会直接回到页面顶部,就是上文说到的第一种情况。
实现
动态显示滚动按钮
“回到顶部”并不是一直显示的,而是滚动到一定值才出现的,因此应该在window.onscroll里定义一个判断事件。
window.onscroll=function(){varcurrentHeight=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。
id="top">scrollTo函数
控制滚动条回到指定位置,第一个参数是距离页面左端的距离,第二个参数是距离页面顶部的距离。
href="javascript:scrollTo(0, 0)">回到顶部scrollTop函数
控制滚动条垂直偏移。
onclick="byScrollTop()">回到顶部......function byScrollTop() {document.documentElement.scrollTop = 0;window.pageYOffset = 0; // 兼容iosdocument.body.scrollTop = 0; // 兼容低版本ie}scrollBy函数
该方法可把内容滚动指定的像素数。第一个参数指向右滚动的像素,第二个参数指向下滚动的参数,负数可使方向相反。
onclick="byScrollBy()">回到顶部......function byScrollBy() {var topHeight =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;scrollBy(0, -topHeight);}间接回到顶部
定时器实现滚动动画
通过定时器实现固定速度的自动滚动动画效果。但是这样会有个问题,就是当页面内容十分多的时候,这个时候离顶部已经有很长一段距离了。如果还是一个固定速度的话,可能会长达10秒钟,这对用户体验来说是不友好的。
onclick="scrollToTop()">回到顶部......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;}}定时器实现滚动动画-改良版
基于上面这个问题,我们可以设置一个速度的最小值,让滚动速度从快到慢,但也不至于过慢。
functionscrollToTop(){vartopHeight=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;varspeed=topHeight/10>100?topHeight/10:100;scrollBy(0,-speed);// 模拟鼠标向上滚动事件scrolldelay=setTimeout(scrollToTop(),50);// 清除滚动事件,避免无法向下移动if(topHeight===0){clearTimeout(scrolldelay);scrolldelay=null;}}