关于网站回到顶部的实现
2017-07-16 本文已影响0人
高家小威
在我们浏览网页的时候，当页面下拉到一个可视窗口以下时，大多数网站会在页面右侧边栏出现一个“回到顶部”的小按钮，以方便我们回到本页面最顶端，避免繁琐的滚动鼠标滚轮或者滚动条。
那这种回到顶部的效果是怎么实现的？
1.无滚动效果，也就是直接到顶部，视觉效果差，但是快速，点一下就立马回到顶部。例如：京东
2.有滚动效果，用户体验好，这也是目前多数网站采用的滚动回顶的方式。例如：淘宝为例：
下面重点讲一下第二种，敲黑板！！！
这个效果剖析原理无非是定时：setinterval。
下面我们来实现一下。
先布局，将置顶的小块固定在某个位置
点击小div,实现滚动回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<style>
div {
width: 30px;
height: 30px;
background: rgba(0,0,0,0.3);
color: #fff;
text-align: center;
line-height: 30px;
position: fixed;
right:0;
top:500px;
}
</style>
<script>
window.onload = function () {
var oDiv = document.querySelector('div');
window.onscroll = function () {
var iScroll = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.onclick = function () {
var start=iScroll; //开始的滚动距离
var end =0; //结束的滚动距离
var total=end-start; //移动的距离差
var time=500; //移动的总时长
var count= Math.ceil(time / 30); //定时器走500毫秒需要走几步的总步数
var n=0; //初始化n.开启定时器后让 n++
var timer = null; //定义定时器
timer=setInterval(function () {
n++;
if(n==count){
clearInterval(timer);
}
console.log(count)
if(document.documentElement.scrollTop){
document.documentElement.scrollTop=start + n * total / count;
// total/count意思是每30秒，走一步移动的距离
}else{
document.body.scrollTop=start + n * total / count;
}
},30);
}
}
}
</script>
</head>
<body style="height: 3000px;">
<div>↑</div>
</body>
</html>
