移动端返回顶部案例

时间:2022-07-28
本文章向大家介绍移动端返回顶部案例，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

1.案例：返回顶部

当页面滚动某个地方，就显示，否则隐藏

点击可以返回顶部

2.案例分析

  1. 滚动某个地方显示
  2. 事件：scroll页面滚动事件
  3. 如果被卷去的头部（window.pageYOffset ）大于某个数值
  4. 点击，window.scroll(0,0) 返回顶部 
// 返回顶部模块制作
  var goBack = document.querySelector(".goBack");
  var nav = document.querySelector("nav");
  window.addEventListener("scroll", function () {
    if (window.pageYOffset >= nav.offsetTop) {
      goBack.style.display = "block";
    } else {
      goBack.style.display = "none";
    }
    goBack.addEventListener("click", function () {
      window.scroll(0, 0);
    });

随机文章
本站知识点必读
最近更新