js实现点击按钮返回页面顶部

最新推荐文章于 2024-04-04 09:49:14 发布

原创最新推荐文章于 2024-04-04 09:49:14 发布 · 648 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html5

本文介绍了一种使用JavaScript实现点击按钮平滑返回页面顶部的方法。通过控制页面滚动速度，提供了良好的用户体验，适合应用于长页面底部的返回顶部按钮。

js实现点击按钮返回页面顶部

点击页面底部的按钮（position: fixed;），优雅的返回到页面顶部，
此处按钮比较丑，项目上可以用字体图标代替美化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>返回顶部</title>
</head>
<style>
    /* 返回顶部 */
    * {
        margin: 0;
        padding: 0;
    }
    #btn_totop {
        position: fixed;
        bottom: 0;right:0;
    } 
</style>
<body>
    <div>
        <div style="height: 30px;line-height: 30px;background-color: black;color: white;text-align: center;">
            <span>header</span> 
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div style="height: 50px;line-height: 50px;background-color: rgb(51, 50, 50);color: white;text-align: center;">
            <span>footer</span>
        </div>
    </div>
    <div id="btn_totop">
        <button>点击返回顶部</button>
    </div> 
</body>
</html>
<script>
    //返回顶部
    window.onload = function(){
        var oBtn=document.getElementById('btn_totop');
        //用处：避免当按钮触发页面回到顶部时页面滚动这个过程未结束，用户此时人为滚动时页面不会准确响应用户
        var bSys = true;
        var timer = null;
        window.onscroll = function(){
            //当认为滚动页面，关闭定时器
            if(!bSys){
                clearInterval(timer);
            }
            bSys = false;
        }
        oBtn.onclick = function()
        {
            //每30ms执行一次  scrollTop+iSpeed
            timer = setInterval(function(){
                var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                //算速度     除以的数值越大，速度越慢
                var iSpeed=Math.floor(0-scrollTop/5);
                if(scrollTop == 0){
                    //不关闭定时器，会导致第一次回到顶部之后，导致不能在响应用户的滚动，不定的触发回到顶部
                    clearInterval(timer);
                }
                //当按钮启动页面滚动，设置为true
                bSys=true;
                document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
            }, 30);
        }
    }
</script>