JavaScript : 頁面的捲動控制

這兩天在幫「HTML5 注音高手」做網頁嵌入語法產生器，哈！當然不是重新「造輪子」。利用最近弄得比較完整的「雄 : HTML5 : Speaking@Blogger 語法產生器」當基底，讓它更「花俏」一點就好。

這一系列的網頁嵌入語法產生器，都只要經過「1.改」、「2.玩」、「3.剪貼」三大步驟，即可製作好遊戲可置入網頁或 Blogger 的語法。由步驟１，進行到步驟２，是由上而下，很自然的將頁面捲動到下一步驟；但是由步驟２，到步驟３時，因為在步驟２試玩遊戲時，程式必須將頁面捲回最頂端才能順利進行，試玩結束，要進入步驟３，就得一直往下捲動頁面來尋找，實在太不人性了！

為了解決前述的問題，在最上方，我加上了三個圓形按鈕，它們在按下去後，可以如傳送門，直接跳到目的地。以前老派的做法，哈！大概就是加上超連結，今天玩一點不一樣的。

前面提到步驟２試玩遊戲時，頁面必須捲到最頁面的最頂端，不然會出問題（遊戲畫面跑到看不見的區域、無法觸控），所以我向來會在進入遊戲前，執行這道指令：

window.scrollTo(0,0);

這樣就可以將頁面捲動到最頂端了。

scrollTo 使用的是絕對位置，還有另一個方法是使用相對距離的「scrollBy」。

所以剩下的問題是怎麼算出要捲動多少距離？

HTML5 注音高手語法產生器畫面

為了算出距離，我們會利用到 HTML 物件的以下屬性：

• offsetTop : 元件頂端，和它的 offsetParent 頂部(內緣)間的距離。
• offsetHeight : 元件本身的高度大小。
• window.scrollY : 目前頁面在 Y 方向捲動了多少個點。

有了這些資料，就可以算出我要的資訊了！

以前面圖中的藍色按鈕(物件代號: from)，按下去要跳到「步驟 1」的標題處(物件代號: to)，這樣可以算出兩者之間的距離：

var offset = to.offsetTop - from.offsetTop;

不過，因為按鈕的起始位罝，並不見得是在畫面的最上方，如果想讓步驟的標題剛好移到畫面的最上方，還得修正一下。

from.offsetTop - window.scrollY

將按鈕距頂端位置減掉目前頁面 Y 方向捲動到哪裡了，就是按鈕到畫面上方的距離了。不過還有一些物件本身的其它設定會需要修正，最簡單的方法是，再減掉按鈕高度的四分之一，應該會更完美，所以最後要移動的距離(yOffset)是：

var yOffset = offset + from.offsetTop - window.scrollY - from.offsetHeight/4

結合執行捲動的指令變成：

window.scrollBy(0, yOffset);

為了讓捲動可以看起來更平順，可以改成這樣：

window.scrollBy({
    top: yOffset,
    left: 0,
    behavior: 'smooth'
});

最大的關鍵是「behavior: 'smooth'」，它讓捲動的過程以稍慢的動畫呈現，看起來會比較平順。

想看一下效果如何，可以先試著按一下這個按鈕，看它會不會捲到前面的圖片：

捲捲捲

或是去玩一下「雄 : HTML5 : Speaking@Blogger 語法產生器」，哈！HTML5 注音高手的語法產生器正式上線後，我再補連結。

每一次的改良，總是挖到更多的東西可玩，這是前進的動力啊！

相關連結

• 雄 : HTML5 : Speaking@Blogger 語法產生器