1.介绍
当页面对多,过长时,用户浏览到下面,有时需要滑动很久向上的鼠标才可以到达顶部位置,因此我们设置一个回到顶部按钮,
当用户点击时,自动滑动到顶部,来方便用户的操作。
2.实现
2.1 HTML
<div class="box">
<div class="img">
<img src="image/1.png" alt="pic">
<img src="image/1.png" alt="pic">
<img src="image/1.png" alt="pic">
</div>
<div class="btn">
<input id="btn" type="button" value="返回顶部">
</div>
</div>
2.2 CSS
*{ margin: 0; padding:0; } body{ font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #222222; } .box .img{ margin:0 auto; text-align: center; } .box .btn{ position: fixed; bottom: 15px; right: 15px; }
2.3 JavaScript
<script>
window.onload = function () {
/*获得button对象*/
var btn = document.getElementById('btn')
/*声明定时器*/
var timer = null
/*标识是系统滑动还是用户滑动*/
var isScroll = false
/*用户滑动时执行*/
window.onscroll = function () {
if (!isScroll){
clearInterval(timer)
}
isScroll = false
}
/*返回顶部的点击事件*/
btn.onclick = function () {
timer = setInterval(function () {
/*获得距离顶部的距离*/
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
/*滑动的速度 floor向下取整*/
var speed = Math.floor(-scrollTop/9)
/*回到顶部时,清除定时器*/
if(scrollTop == 0){
clearInterval(timer)
}
document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed
/*系统滑动*/
isScroll = true
},30)
}
}
</script>