网站经典功能之返回顶部

1. 背景介绍

当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “回到顶部”这一功能便出现了。

2. 返回顶部代码示例

<style>
    div.box {
        height: 1000px;
        background-color: aqua;
        margin-bottom: 20px;
    }
    div#gotop {
        width: 30px;
        height: 30px;
        cursor: pointer;
        border-radius: 4px;
        background-color: #4c4c4c;
        position: fixed;
        right: 30px;
        bottom: 60px;
    }
    div#gotop img {
        width: 100%;
        height: 100%;
    }
</style>
<div class="box"></div>
<div class="box"></div>
<div id="gotop">
    <img src="https://www.itqaq.com/static/index/plugin/fixed/images/top.png">
</div>
<script>
    window.onscroll = () => {
        const res = document.body.scrollTop || document.documentElement.scrollTop
        const gotop = document.getElementById('gotop')
        gotop.style.display = res > 400 ? 'block' : 'none'
    }
    gotop.onclick = () => {
        let res = document.body.scrollTop || document.documentElement.scrollTop
        let t = res / 60
        const index = setInterval(() => {
            res -= t
            if (res < 0) {
                res = 0
                clearInterval(index)
            }
            document.body.scrollTop = res
            document.documentElement.scrollTop = res
        }, 5);
    }
</script>