01.demo 返回顶部(js小训练)

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

效果图展示

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 );
}

结束

相关推荐
开开心心就好25 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享26 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js