zoukankan      html  css  js  c++  java
  • 仿淘宝返回顶部案例

    .案例:返回顶部

    1. 带有动画的返回顶部

    2. 此时可以继续使用我们封装的动画函数

    3. 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了

    4. 页面滚动了多少,可以通过 window.pageYOffset 得到

    5. 最后是页面滚动,使用 window.scroll(x,y)

    <script>
          // 1. 获取元素
          var sliderbar = document.querySelector(".slider-bar");
          var banner = document.querySelector(".banner");
          //   console.log(banner.offsetTop);
          // banner.offsetTop 就是被卷进去的头部大小
          var bannerTop = banner.offsetTop;
          // 当我们侧边栏固定定位之后应该是变化的数值
          var sliderbarsTop = sliderbar.offsetTop - bannerTop;
          // 获取main主体
          var main = document.querySelector(".main");
          var goBack = document.querySelector(".goBack");
          var mainTop = main.offsetTop;
          // 2. 页面滚动元素
          document.addEventListener("scroll", function () {
            // console.log(11);
            // console.log(window.pageYOffset);
            //  当我们页面被卷去的头部大于等于171 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= banner.offsetTop) {
              sliderbar.style.position = "fixed";
              sliderbar.style.top = sliderbarsTop + "px";
            } else {
              sliderbar.style.position = "absolute";
              sliderbar.style.top = "300px";
            }
            if (window.pageYOffset >= main.offsetTop) {
              goBack.style.display = "block";
            } else {
              goBack.style.display = "none";
            }
          });
          // 3. 当我们点击返回顶部模块,就让窗口滚动到页面的最上方
          goBack.addEventListener("click", function () {
            // 里面的x 和 y 不跟单位的 直接写数字即可
            // window.scroll(0,0)
            // 因为是窗口滚动 所以对象是window
            animate(window, 0);
          });
    
          // 动画函数
          function animate(obj, target, callback) {
            // 先清除以前的定时器,只保留当前的一个定时器执行
            clearInterval(obj.times);
            obj.times = setInterval(function () {
              // 步长值写道定时器的里面
              // 把我们步长改为整数 不要出现小数
              //   var sept = Math.ceil((target - obj.offsetLeft) / 10); 因为有前进和后退 所以要用判断条件
              var sept = (target - window.pageYOffset) / 10;
              sept = sept > 0 ? Math.ceil(sept) : Math.floor(sept);
              if (obj.window.pageYOffset == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.times);
                if (callback) {
                  callback();
                }
              }
              // 把每次加 1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
              //   obj.style.left = obj.offsetLeft + sept + "px";
              window.scroll(0, window.pageYOffset + sept);
            }, 15);
          }
        </script>
  • 相关阅读:
    Leetcode Binary Tree Preorder Traversal
    Leetcode Minimum Depth of Binary Tree
    Leetcode 148. Sort List
    Leetcode 61. Rotate List
    Leetcode 86. Partition List
    Leetcode 21. Merge Two Sorted Lists
    Leetcode 143. Reorder List
    J2EE项目应用开发过程中的易错点
    JNDI初认识
    奔腾的代码
  • 原文地址:https://www.cnblogs.com/bky-/p/13768711.html
Copyright © 2011-2022 走看看