前端 平滑滚动到底部/顶部

页面滚动时，添加平滑特效

1.在页面入口处，添加css

html {
    scroll-behavior: smooth;
}

添加全局css之后，直接使用window.scroll(0,0)就可以平滑滚动到顶部了。

注：兼容性很差，仅支持火狐、chrome高级版本

2.指定滚动操作，使用平滑效果

平滑滚动到某块元素的底部：scrollIntoView

    let anchorElement = document.getElementById("softwareHeader-container");
    let scrollIntoViewOptions: ScrollIntoViewOptions = {
        block: 'end',
        behavior: "smooth"
    }
    if (anchorElement) {
        anchorElement.scrollIntoView(scrollIntoViewOptions)
    }

或者平滑滚动到指定位置：ScrollToOptions、scrollTo

  let scrollOptions:ScrollToOptions = {
    left: 0,
    top: 1000,
    behavior:'smooth'
  }

  window.scrollTo(scrollOptions);

兼容性：大部分支持，猎豹不支持。

3.添加JS滚动代码

滚动到顶部：

    returnTop = () => {
        //记录当前执行动画的标识
        let animationStepNumber;
        function exeucteAnimationByStep() {
            //当前页面的滚动高度
            let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (currentScrollTop >= 4) {
                animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
                let scrollLocationChanging = currentScrollTop / 9;
                scrollLocationChanging = scrollLocationChanging > 1 ? scrollLocationChanging : 1;
                let newScrollTop = currentScrollTop - scrollLocationChanging;
                window.scrollTo(0, newScrollTop);
            } else {
                window.cancelAnimationFrame(animationStepNumber);
                window.scrollTo(0, 0);
            }
        }
        animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
    }

滚动到底部：

  scrollToPageBottom = () => {
    let animationStepNumber;
    function exeucteAnimationByStep() {
      let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let totalHeight = (document.documentElement.scrollHeight || document.body.scrollHeight) - window.innerHeight;
      //剩余的高度
      let scrollingHeight = totalHeight - currentScrollTop;
      if (scrollingHeight >= 4) {
        animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
        //滚动变量
        let scrollChangedHeight = scrollingHeight / 9;
        scrollChangedHeight = scrollChangedHeight > 1 ? scrollChangedHeight : 1;
        window.scrollTo(0, currentScrollTop + scrollChangedHeight);
      } else {
        window.cancelAnimationFrame(animationStepNumber);
        window.scrollTo(0, totalHeight);
      }
    }
    animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
  };

原理：

requestAnimationFrame，告诉浏览器重绘时执行动画，参数是具体执行方法，返回参数是nubmer（标识）

注：如果需要连续执行动画，则需要在回调函数中，先添加一个待执行动画回调requestAnimationFrame。（如上案例）

cancelAnimationFrame，取消待执行的动画。

注：执行完所有动画后，一定要注销上一个动画回调（如果有的话），否则会影响页面滚动（因为回调函数中的动画委托还在待处理呢）。

兼容性：平滑效果，支持所有浏览器。

缺陷：滚动过程中，不能操作手动滚动页面。这个缺陷，也有理论上的解法，可以添加滚动事件监听，如果滚动方向与平滑动画效果方向相反，则取消平滑动画的处理（调cancelAnimationFrame即可）

特别提示：添加纯js平滑滚动方案，需要将第1个方案css全局的设置删除了，否则滚动会很缓慢。