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

结束

相关推荐
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack3 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python