移动端返回顶部案例

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

 

posted @ 2020-10-05 23:05  행운의소녀  阅读(116)  评论(0编辑  收藏  举报