隐形的网页平滑回顶按钮

覆盖于看板娘之上实现自适应单击平滑回顶笔记

【推荐】精简方案 丝滑滚动

自适应依据屏幕宽度自动变更大小，botton 样式请自行更改

<botton style="
    position: fixed;
    right: 68px;
    bottom: 60px;
    width: 104px;
    height: 384px;
    background: #ffffff00;
    //border: #9E9E9E;
    //border-width: 1px;
    border-style: none;
" title="点我返回顶部诶
" id="topBotton"
>
</botton>

<script type="text/javascript">
    
    var windowWidth = $(window).width();
        var tBotton = document.getElementById("topBotton")
    
        if(windowWidth < 701){
            tBotton.style.right="7px";
            tBotton.style.bottom="24px";
            tBotton.style.width="82px";
            tBotton.style.height="158px";
        }
        if(windowWidth >= 701 && windowWidth <= 768){
            tBotton.style.right="32px";
            tBotton.style.bottom="27px";
            tBotton.style.width="46px";
            tBotton.style.height="175px";

        }
        if(windowWidth > 768){
            tBotton.style.right="68px";
            tBotton.style.bottom="60px";
            tBotton.style.width="104px";
            tBotton.style.height="384px";
        }
    window.onresize = function(){
        //定义变量获取屏幕视口宽度
        var windowWidth = $(window).width();
        var tBotton = document.getElementById("topBotton")
        if(windowWidth < 701){
            tBotton.style.right="7px";
            tBotton.style.bottom="24px";
            tBotton.style.width="82px";
            tBotton.style.height="158px";
        }
        if(windowWidth >= 701 && windowWidth <= 768){
            tBotton.style.right="32px";
            tBotton.style.bottom="27px";
            tBotton.style.width="46px";
            tBotton.style.height="175px";

        }
        if(windowWidth > 768){
            tBotton.style.right="68px";
            tBotton.style.bottom="60px";
            tBotton.style.width="104px";
            tBotton.style.height="384px";
        }
    }
    
    tBotton.onclick = function(){
           window.scrollTo({
            top: 0,
               behavior: 'smooth',
           });
    }
</script>

【存档】复杂方案 略卡滚动

自适应依据屏幕宽度自动变更大小，botton 样式请自行更改

<botton style="
    position: fixed;
    right: 68px;
    bottom: 60px;
    width: 104px;
    height: 384px;
    background: #ffffff00;
    //border: #9E9E9E;
    //border-width: 1px;
    border-style: none;
" title="点我返回顶部诶
" id="topBotton"
>
</botton>

<script type="text/javascript">
        window.onload =function(){
            var timer = null;//时间标识符
            var isTop = true;
            
            var obtn = document.getElementById('topBotton');
            obtn.onclick = function(){
                // 设置定时器
                timer = setInterval(function(){
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //减小的速度
                    var isSpeed = Math.floor(-osTop/6);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed; 
                    //判断，然后清除定时器
                    if (osTop == 0) {
                        clearInterval(timer);
                    } 
                    isTop = true;//添加在obtn.onclick事件的timer中    
                },30);                          
            };
            //获取页面的可视窗口高度
            var client_height = document.documentElement.clientHeight || document.body.clientHeight;
            //滚动条滚动时触发             
            window.onscroll = function(){ 
                //在滚动的时候增加判断,忘了的话很容易出错
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (osTop >= client_height) {
                    obtn.style.opacity = '1';
                }else{
                    obtn.style.opacity = '0';
                }         
                if(!isTop){
                    clearInterval(timer);
                }
                isTop = false;
            };
        }
    </script>
 
<!--     DOM：
        1、document.getElementById()
        2、document.documentElement.scrollTop
        3、document.body.scrollTop
    事件：
        1、window.onload
        2、window.onscroll
        3、obtn.onclick
    定时器的使用：
        1、setInterval(function(){},30)
        2、clearInterval(timer) -->

<script type="text/javascript">
    var windowWidth = $(window).width();
        var tBotton = document.getElementById("topBotton")
        if(windowWidth < 701){
            tBotton.style.right="28px";
            tBotton.style.bottom="24px";
            tBotton.style.width="42px";
            tBotton.style.height="158px";
        }
        if(windowWidth >= 701 && windowWidth <= 768){
            tBotton.style.right="32px";
            tBotton.style.bottom="27px";
            tBotton.style.width="46px";
            tBotton.style.height="175px";

        }
        if(windowWidth > 768){
            tBotton.style.right="68px";
            tBotton.style.bottom="60px";
            tBotton.style.width="104px";
            tBotton.style.height="384px";
        }
    window.onresize = function(){
        //定义变量获取屏幕视口宽度
        var windowWidth = $(window).width();
        var tBotton = document.getElementById("topBotton")
        if(windowWidth < 701){
            tBotton.style.right="28px";
            tBotton.style.bottom="24px";
            tBotton.style.width="42px";
            tBotton.style.height="158px";
        }
        if(windowWidth >= 701 && windowWidth <= 768){
            tBotton.style.right="32px";
            tBotton.style.bottom="27px";
            tBotton.style.width="46px";
            tBotton.style.height="175px";

        }
        if(windowWidth > 768){
            tBotton.style.right="68px";
            tBotton.style.bottom="60px";
            tBotton.style.width="104px";
            tBotton.style.height="384px";
        }
    }
</script>

参考文章

精简方案改编自

js原生回到顶部，并平滑过渡 记录-秋风2016-博客园

复杂方案改编自

原生JS实现动态返回顶部_JavaScript_smallSisterSister_CSDN