实现平滑滚动页面到顶部的功能(各个浏览器兼容性较强)

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原型上写就可以。

 

posted @ 2020-02-19 16:16  益码凭川  阅读(663)  评论(0编辑  收藏  举报