要求：点击之后页面由快到慢返回顶部

效果图展示

html部分

写出一个按钮并为其命名这里我个人又添加了一个图片方便其确认顶部

xml 复制代码

<!-- html -->
    <button id="backToTopBtn" onclick="scrollToTop()">返回顶部</button>
    <img src="./QQ图片20231029195645.gif" alt="">

css部分

xml 复制代码

 <style>
  #backToTopBtn 
{
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 40px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.7;
}

#backToTopBtn:hover 
{
  opacity: 1;
} 
body{
    height: 3000px;
}
img{
  height: 320px;
  width: 480px;
  position: absolute;
  top: 0px;
  left: 600px;
}
    </style>

无需多言，都能看懂，就是一个fixed定位以及一些css基础样式编辑

js部分

首先设置一个函数绑定一个按钮

ini 复制代码

 window.onscroll = function() {
        scrollFunction();
};

function scrollFunction() {
  var backToTopBtn = document.getElementById("backToTopBtn");

第二步写出一个if else结构来判断是否超过500px来显示按钮

ini 复制代码

function scrollFunction() {
  var backToTopBtn = document.getElementById("backToTopBtn");

  // 当滚动超过 500 像素时显示按钮
  if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
}

第三步要写出一个由快到慢的效果则需要设置一个定时器并监听其滚动距离最后到达顶部时清除定时器即可

ini 复制代码

function scrollToTop() {
  //  由快到慢 (每次开启定时器都重新计算速度)

timer = setInterval( function(){

//获取滚动条的滚动高度

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

//用于设置速度差，产生缓动的效果

var speed = Math.floor(-scrollTop / 8);

document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;//用纯数字赋值

isTop =true; //用于阻止滚动事件清除定时器

if(scrollTop == 0){
clearInterval(timer);
}
},30 );
}

01.demo 返回顶部（js小训练）

要求：点击之后页面由快到慢返回顶部

效果图展示

html部分

css部分

js部分

结束