回到顶部

最新推荐文章于 2024-10-27 22:24:41 发布

斗弟

最新推荐文章于 2024-10-27 22:24:41 发布

阅读量190

点赞数

分类专栏：原生插件文章标签： JS回到顶部插件

本文链接：https://blog.csdn.net/L_Lintellect/article/details/99732929

版权

原生插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原生 js 回到顶部插件

所谓插件，就是封装好的函数，一些比较常用又强大的功能，就通俗称为插件，像放大镜、轮播图等，各种各样的功能，都可以封装起来，需要用到是，调用即可。可以有参，也可以无参。

html结构

<span id="totop">回到顶部</span>

css样式

 * {
     margin: 0;
     padding: 0;
  }

  body {
       height: 4000px;
       /* 为了体现效果 ，实际使用删除 */
  }

  /* 回到顶部节点的样式 */
  #totop {
      /* display: block; */
      width: 80px;
      height: 80px;
      ine-height: 80px;
      position: fixed;
      right: 20px;
      bottom: 100px;
      cursor: pointer;
      display: none;
      background: #ccc;
      text-align: center;
  }

js代码

/*
		调用案例：toTop('totop');
    totop：为回到顶部的元素id名称
    使用步骤：
        *引入js（插件），
        *调用：toTop('节点的 id 名');
*/

function toTop(toTopId) {
    let totop = document.getElementById(toTopId);
    //控制出现或隐藏
    window.onscroll = function () {
        let scrollTop = window.scrollY;  //获取当前滚动距离
        // console.log(scrollTop)
        if (scrollTop >= 300) {
            totop.style.display = 'block'
        } else {
            totop.style.display = 'none'
        }
    }
    //定时器开启步长，缓慢回到顶部，可要可不要
    let num = 180;
    let fuck = setInterval(function () {
        num -= 5;
    }, 1000);
    //点击回到顶部
    totop.onclick = function () {
        let scrollTop = window.scrollY;  //获取当前滚动距离
        let timer = setInterval(function () {
            scrollTop -= num;
            if (scrollTop <= 0) {
                clearInterval(timer);
            }
            window.scrollTo(0, scrollTop);   //回顶部
        }, 30);
    }
}