前端 平滑滾動到底部/頂部

頁面滾動時，添加平滑特效

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

獲取指定元素也可以通過類名獲取：

  scrollToTop = () => {
    const exerciseContainerRoot = (document.getElementsByClassName('question-list-item') as HTMLCollectionOf<HTMLElement>)[0];
    let scrollIntoViewOptions: ScrollIntoViewOptions = {
      block: 'start',
      behavior: 'smooth',
    };
    exerciseContainerRoot.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全局的設置刪除了，否則滾動會很緩慢。