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

结束

相关推荐
JNU freshman14 分钟前
Element Plus组件
前端·vue.js·vue3
一只专注api接口开发的技术猿21 分钟前
容器化与调度:使用 Docker 与 K8s 管理分布式淘宝商品数据采集任务
开发语言·前端·数据库
我有一棵树26 分钟前
性能优化之前端与服务端中的 Gzip 压缩全解析
前端
魔术师卡颂29 分钟前
不就写提示词?提示词工程为啥是工程?
前端·人工智能·后端
訾博ZiBo1 小时前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI1 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒1 小时前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪1001 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ1 小时前
python面向对象
前端·数据库·python