5行JavaScript代碼實現頁面平滑滾動
HTML 本身具有跳到頁面任意位置的能力，只需給目標元素一個 id 屬性即可。這個技術叫做“ 錨鏈接 ”。
不過，這種跳轉是瞬間完成的。為了讓人看起來舒服，很多網站都會給頁內跳轉加上 平滑或慢慢滾動到頁面某處 的設計。
過去人們大都用jQuery來實現此設計，但為這就加載一個 框架 有點小題大做。現代 JavaScript 為此提供了原生的 window.scrollTo 方法，效率更高。
首先，還是要有一個標準的錨鏈接，以防新技術不可用，還可以照老樣子跳到目標。
<a href="#destination">Click me: I’m <em>smoooooth</em>.</a>
…
<p id="destination">This is the target, further down the page.
顯然，只有頁面長度超過窗口高度才可能真的跳轉。為此，請自行在前面代碼中省略號位置補充足夠多的內容（或者試試我們推薦的 填充文本生成器 )。
兩種滾動
頁面滾動的API有兩種實現方式：CSS和JavaScript。兩種方式本身就容易讓人困惑，再加上有些瀏覽器支持有些瀏覽器不支持，或者只以實驗方式支持，問題就顯得復雜了。（參見下文。）
CSS實現方式下，需要給“平滑滾動”的元素（通常是 body ）應用 scroll-behavior: smooth （ CSS參考 ）:
body {
scroll-behavior: smooth;
}
注意，別用英式寫法，是 scroll-behavior ，沒有“u”。
JavaScript方式
JavaScript 代碼要添加到頁面最后，以免阻塞。沒錯，我們說了只用5行代碼。這里為方便解釋，我稍微增加幾行：
var anchorLink = document.querySelector("a[href='#destination']"),
target = document.getElementById("destination");
anchorLink.addEventListener("click", function(e) {
if (window.scrollTo) {
e.preventDefault();
window.scrollTo({"behavior": "smooth", "top": target.offsetTop});
}
})
先用 querySelector 通過 CSS屬性選擇符 找到 href 目標為 #destination 的鏈接。在鏈接的點擊事件中，測試瀏覽器是否支持 scrollTo 方法。如果支持，先用 e.preventDefault 阻止瀏覽器立即跳轉，然后調用 scrollTo 方法，由前面的CSS聲明實現平滑效果。有3個選項： behavior 、 top 必需， left 可選。后兩個指的是跳轉目標在頁面中的位置坐標值。
可以用 window.scroll 代替 window.scrollTo ，它們功能一樣。
相對于加載框架，這幾行代碼簡單得多。唯一的缺點是不允許修改計時函數或緩動函數，據說是防止被濫用。
腳本抽象
前面的腳本可以用，但要求你必須提前知道跳轉目標的名字，而且只能應用到一個鏈接。要是頁面中有多個鏈接，需要平滑跳轉到多個目標呢？這時就需要對腳本做一點抽象。
因為我們要引用 nodeList ，所以先寫一個幫助函數，在 forEach 循環里找到鏈接：
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]);
}
};
然后，找到所有錨鏈接和它們的地址，給它們的點擊事件注冊 scrollTo ：
var anchorLinks = document.querySelectorAll("a[href^='#']");
if (window.scrollTo) {
forEach(anchorLinks, function(index, element) {
var target = document.getElementById(element.getAttribute("href").substring(1));
element.addEventListener("click", function(el) {
el.preventDefault();
window.scrollTo(0, target.offsetTop);
})
});
}
注意，同樣需要在 body 標簽的CSS樣式中添加 scroll-behavior 聲明。
瀏覽器支持
以上技術當前面臨的問題是瀏覽器兼容性，現在只有Firefox和Chrome支持 window.scrollTo ，而且后者還把實現隱藏在 chrome://flags 中一個“實驗性網絡平臺功能”的選項里（需要手工啟用）。
正像一開始咱們說的，我們前面的腳本是基于“ 漸進增強 ”原則寫的，所以不支持的瀏覽器照樣能正確跳轉，只是不能平滑地滾過去而已。為此，我推薦Dustan Kasten寫的“膩子腳本” smoothscroll 。
結論
這個技術經常與“粘貼便簽”（sticky）聯用，后者會隨著頁面滾動一直出現在窗口中。更多內容，歡迎參考我的 另一篇文章 。
來自： http://www.zcfy.cc/article/406