第一个小demo页面返回顶部

1.demo要求：点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面右下方。

2.设计思路：

a:首先是在右下角设置号一个向上返回顶部的按钮，可以用粘性定位，将其固定在右下角。如下代码：

 <div id="box">
            <button id="btn">
            <img src="a58.png" alt="" style="width: 39px; height: 39px;">
        </button>
    </div>

css样式为：

div{
            position: fixed;
            right: 0;
            bottom: 0;
            width: 39px;
            border: 1px solid black;
        }

效果图：

b:接下来就是用js代码来还原其功能了：

 1.需要用到的核心知识点：

Window.scrollBy() 方法在窗口中按指定的偏移量滚动文档。

 参数：

• x-coord 是你想滚动的水平像素值。
• y-coord 是你想滚动的垂直像素值。

top

指定沿 Y 轴滚动窗口或元素的像素数。

left

指定沿 X 轴滚动窗口或元素的像素数。

behavior

指定滚动是否应该平滑（smooth）、瞬时运动到该位置（instant）、或者让浏览器选择（auto，默认）。

 2.具体设计：

首先是给页面设计一个足够的高度，并清除页面边距

*{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 10000px;
        }

然后就是js代码的编写：

首先给滚动条绑定一个函数：方法为加上一个

window.onscroll = function(){}

 只要滚动条滑动就会执行函数

然后再在此函数内部再创建一个函数与返回顶部按钮进行绑定：

btn.onclick = handle
            function handle(){
                 var m = 20
            
                var timer = setInterval(function(){
                    m--;
                    if(m == 0) {
                        clearInterval(timer)
                        m=20
			        } else{
                        window.scrollBy({
                        right:0,
                        top:-(1506*m),
                        behavior:"smooth",
                    })
                    }
                } ,60)
            }

在这里我们可以设置一个间隔计时器用相同时间内滚动条所走过的距离逐渐递减来显示滚动条的由快到慢的效果，这里就要用到window.scrollBy方法，设置滚动条单次向上滑动到的位置。最重要的是滑动效果的设置，设置成平滑就可以显得十分流畅，而不是一顿一顿的。为了保证每次滑动的距离不一样，还需要提前定义一个变量并赋上初值，并在计时器内部设置上自减。最后为了保证滚动条的返回效果可以多次使用，还要用if语句判断滚动条的位置，这里是用定义并赋值的变量自减至0来判断的，这时就要停止计时器函数的继续执行，用上clearInterval，清除间隔计时器，并将赋值的变量重新赋予其初始值以达到重置效果。

对于滚动条滑动到顶部消失的效果则可以用if语句判断滚动条的状态并执行相应代码。

if(Math.round(scrollTop)>300){
                    document.getElementById("btn").style.display="block";
            }else{
                document.getElementById("btn").style.display="none";
            }

这里的判断条件是滚动条距离顶部的距离，所以想要调用首先得定义一下该变量

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

当条件成立就可以修改其按钮样式为block，不成立即滑动到顶部则改为none就实现了。 

最终效果视频展示:

屏幕录制 2023-11-16 125015