搜索
热搜
活动 交友 discuz
发新帖
返回列表
查看 335
回复 0
JavaScript实现丝滑返回顶部
复制链接
逆风天

16

主题

0

回帖

105

积分
超级版主
积分105
发消息
发表于 2024-2-3 02:48:32
显示全部楼层 阅读模式
本帖最后由 逆风天 于 2024-2-3 02:53 编辑
JavaScript实现丝滑返回顶部

实现目标：点击链接或按钮，平滑返回顶部。
1.先写js，如下：
  1. function backToTop(selector, offset, prop = 'all', time = '300', effect = 'ease', delay = 0) {
  2.   const windowScrolled = function () {
  3.     if (document.body.scrollTop > offset || document.documentElement.scrollTop > offset) {
  4.       selector.classList.add('show');
  5.     } else {
  6.       selector.classList.remove('show');
  7.       selector.removeAttribute('class');
  8.     }
  9.   };
  10.   const scrollEvt = function () {
  11.     document.documentElement.scrollTo({
  12.       top: 0,
  13.       left: 0,
  14.       behavior: 'smooth'
  15.     });
  16.   };
  17.   return selectorListener;
  18.   return windowListener;
  19. }
复制代码
2.然后使用，如下：
  1. const setBackTop = document.querySelector('[data-nft-toggle="backTop"]');
  2. backToTop(setBackTop, 800);
复制代码
3.最后写一个html标签，如下：
  1. <a href="javascript:;" data-nft-toggle="backTop">返回顶部</a>
复制代码
4.参数说明：
  1. backToTop(html element, offset, transition-property, transition-duration, transition-timing-function, transition-delay);
复制代码



大致就是这样了。


回复
举报
发新帖
返回列表
高级模式
您需要登录后才可以回帖 登录 立即注册
本版积分规则
QQ 快速回复 返回列表