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

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

1.在頁面入口處，添加css

1 html {
2     scroll-behavior: smooth;
3 }

添加全局css之後，直接使用window.scroll(0,0)就可以平滑滾動到頂部了。

註：相容性很差，僅支持火狐、chrome高級版本

2.指定滾動操作，使用平滑效果

平滑滾動到某塊元素的底部：scrollIntoView

1     let anchorElement = document.getElementById("softwareHeader-container");
2     let scrollIntoViewOptions: ScrollIntoViewOptions = {
3         block: 'end',
4         behavior: "smooth"
5     }
6     if (anchorElement) {
7         anchorElement.scrollIntoView(scrollIntoViewOptions)
8     }

或者平滑滾動到指定位置：ScrollToOptions、scrollTo

1   let scrollOptions:ScrollToOptions = {
2     left: 0,
3     top: 1000,
4     behavior:'smooth'
5   }
6 
7   window.scrollTo(scrollOptions);

相容性：大部分支持，獵豹不支持。

3.添加JS滾動代碼

滾動到頂部：

 1     returnTop = () => {
 2         //記錄當前執行動畫的標識
 3         let animationStepNumber;
 4         function exeucteAnimationByStep() {
 5             //當前頁面的滾動高度
 6             let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 7             if (currentScrollTop >= 4) {
 8                 animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
 9                 let scrollLocationChanging = currentScrollTop / 9;
10                 scrollLocationChanging = scrollLocationChanging > 1 ? scrollLocationChanging : 1;
11                 let newScrollTop = currentScrollTop - scrollLocationChanging;
12                 window.scrollTo(0, newScrollTop);
13             } else {
14                 window.cancelAnimationFrame(animationStepNumber);
15                 window.scrollTo(0, 0);
16             }
17         }
18         animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
19     }

滾動到底部：

 1   scrollToPageBottom = () => {
 2     let animationStepNumber;
 3     function exeucteAnimationByStep() {
 4       let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 5       let totalHeight = (document.documentElement.scrollHeight || document.body.scrollHeight) - window.innerHeight;
 6       //剩餘的高度
 7       let scrollingHeight = totalHeight - currentScrollTop;
 8       if (scrollingHeight >= 4) {
 9         animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
10         //滾動變數
11         let scrollChangedHeight = scrollingHeight / 9;
12         scrollChangedHeight = scrollChangedHeight > 1 ? scrollChangedHeight : 1;
13         window.scrollTo(0, currentScrollTop + scrollChangedHeight);
14       } else {
15         window.cancelAnimationFrame(animationStepNumber);
16         window.scrollTo(0, totalHeight);
17       }
18     }
19     animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
20   };

原理：

requestAnimationFrame，告訴瀏覽器重繪時執行動畫，參數是具體執行方法，返回參數是nubmer（標識）

註：如果需要連續執行動畫，則需要在回調函數中，先添加一個待執行動畫回調requestAnimationFrame。（如上案例）

cancelAnimationFrame，取消待執行的動畫。

註：執行完所有動畫後，一定要註銷上一個動畫回調，否則會影響頁面滾動（因為回調函數中的動畫委托還在待處理呢）。

相容性：平滑效果，支持所有瀏覽器。

缺陷：滾動過程中，不能操作手動滾動頁面。這個缺陷，也有理論上的解法，可以添加滾動事件監聽，如果滾動方向與平滑動畫效果方向相反，則取消平滑動畫的處理（調cancelAnimationFrame即可）