zoukankan      html  css  js  c++  java
  • 实现平滑滚动页面到顶部的功能(各个浏览器兼容性较强)

    react 示例:

    
    
      componentDidMount() {
        // 第一次渲染完成时进行滚动监听
        window.addEventListener('scroll', this.handleScroll, false);
      }
      componentWillUnmount() {
        // 组件移除时去除滚动监听
        window.removeEventListener('scroll', () => {})
      }
      handleScroll = () => {
        this.setState(() => {
          return {
            backTop: window.pageYOffset >= 400
          }
        })
      }

      scrollTo = (el, from = 0, to = 0, duration = 500, endCallback) => {
        if (!window.requestAnimationFrame) { 
          window.requestAnimationFrame = (
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
              return window.setTimeout(callback, 1000 / 60);
            }
          );
        }
        const difference = Math.abs(from - to);
        const step = Math.ceil(difference / duration * 50); // 总的长度 除以 总时间   再乘以 50  => 2000/1000 * 50 = 100 相当于一步走100px
        function scroll(start, end, step) {
     
          let d = 0;
        
          if (start = end) { // 如果相等了 就停止执行
            endCallback && endCallback();
            return;
          } else if (start > end) { // 如果开始位置大于最后位置 开始做减法
            d = (start - step < end) ? end : start - step;
          } ele {
         d = (start + step > end) ? end : start + step;
          }
      
          if (el === window) {
            window.scrollTo(start, d); // 就从开始 start 滚动到 d 处
          } else {
            el.scrollTop = d;
          }
          window.requestAnimationFrame(() => scroll(d, end, step));
        }
      
        scroll(from, to, step);
      };
      gotoTop = () => {
        setTimeout(() => {
          const sTop = document.documentElement.scrollTop || document.body.scrollTop;
          this.scrollTo(window, sTop, 0, 1000, () => {
            console.log('已经滑到顶部啦');
          });
        }, 0);
      }
     

    vue 的话一般直接在Vue原型上写就可以。

  • 相关阅读:
    API接口安全设计方案(已实现)
    第8篇-dispatch_next()函数分派字节码
    第7篇-为Java方法创建栈帧
    第6篇-Java方法新栈帧的创建
    第5篇-调用Java方法后弹出栈帧及处理返回结果
    第4篇-JVM终于开始调用Java主类的main()方法啦
    第3篇-CallStub新栈帧的创建
    第2篇-JVM虚拟机这样来调用Java主类的main()方法
    第1篇-关于JVM运行时,开篇说的简单些
    SpringCloud和SpringCloudAlibaba超详细总结
  • 原文地址:https://www.cnblogs.com/ympjsc/p/12331755.html
Copyright © 2011-2022 走看看