在浏览网页时，我们一般是拖动滚动条向下滑动，浏览下面的内容，当页面超过单页时，右下角会出现一个回到顶部的图标，有些网站这个图标一直显示在右下角的。
有些网站使用锚链接来实现页面内容的跳转，但这种效果的用户体验比较差，因为是突然跳转，眼睛来不及反应。
这里我们使用js实现页面返回顶部。为了使滚动条渐进地上移，我们需要使用定时器。同时通过不断改变滚动条顶部的高度来控制页面的变化。
下面为具体代码实现
index.html:
<!DOCTYPE> <html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="box"> <img src="tb_bg.jpg"/> </div> <a href="javascript:;" id="btn" title="回到顶部"></a> </body> </html>
style.css:
.box { width:1190px; /*图片居中*/ magin:0 auto; } #btn { width:40px; height:40px; /*设置固定位置*/ position:fixed; left:50%; margin-left:610px; bottom:30px; background:url(top_bg.png) no-repeat left top; } /*鼠标浮动切换图片效果*/ #btn:hover { background:url(top_bg.png) no-repeat 0 -40px; }
script.js:
/** * Created by lujie on 2016/11/15. */ //页面加载完毕后触发 window.onload = function () { var obtn = document.getElementById('btn'); var timer = null; var isTop = true; //滚动条滚动时触发 window.onscroll = function () { if(!isTop){ clearInterval(timer); } isTop = false; } obtn.onclick = function () { //设置定时器 timer = setInterval(function () { //滚动条距离顶部的高度 var osTop = document.documentElement.scrollTop||document.body.scrollTop; var isSpeed = Math.ceil(osTop/6); document.documentElement.scrollTop = document.body.scrollTop = osTop-isSpeed; isTop = true; if(osTop == 0){ clearInterval(timer); } },30); } }
注：IE浏览器滚动条顶部的高度：document.documentElement.scrollTop
谷歌浏览器滚动条顶部的高度：document.body.scrollTop