HTML回到顶部实现

HTML回到顶部实现

1.介绍

当页面对多，过长时，用户浏览到下面，有时需要滑动很久向上的鼠标才可以到达顶部位置，因此我们设置一个回到顶部按钮，当用户点击时，自动滑动到顶部，来方便用户的操作。

2.实现

2.1 HTML

<p class="box">
    <p class="img">
        <img src="image/1.png" alt="pic">
        <img src="image/1.png" alt="pic">
        <img src="image/1.png" alt="pic">
    </p>
    <p class="btn">
        <input id="btn" type="button" value="返回顶部">
    </p>
</p>

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>