博客

js原生实现回到顶部

  • Post author:
  • Post category:其他




js原生实现回到顶部

以下为简易版的回到顶部功能，可以自己加图标修改样式等。 

<body style="height: 10000px;">
	<div id="goTop"></div>
</body>

#goTop {
    width: 30px;
    height: 30px;
    background: red;
    position: fixed;
    right: 50px;
    bottom: 50px;
}

var timer = null
document.querySelector("#goTop").onclick = () => {
    clearInterval(timer)
    var start = document.documentElement.scrollTop
    var end = 0
    timer = setInterval(() => {
        // 让start减20px,可以根据自己的情况而定
        start -= 20
        document.documentElement.scrollTop = start
        if(start <= end) clearInterval(timer)
    }, 30)
}


版权声明：本文为qq_40864647原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。