用 jQuery 實現頁面滾動（Scroll）效果的完美方法

以前很多部落客都寫過/轉載過用jQuery 實現頁面滾動（Scroll）效果的方法，但目前搜來的方法大都在Opera 下有個小Bu​​g：直接用跳的而且畫面閃爍。

今天，超級低調的高手Willin 共享了一個完美方法解決jQuery 實現滾動效果在Opera 下的bug，我隨即調試#+應用到我目前的主題，目前經過測試非常完美，刻意貼出程式碼加以說明。

因為我自己不太懂 js，jQuery 也只是皮毛，原理方面我說不清楚，只能說明修改方法。

示範：點選現在的主題zOM 底部的「Δ」/文章頁標題下方的「x comments」  「 Leave a comment」

假設：你的主題最上面的id 是header，最下面的「回頂端」的id 為top

jQuery 程式碼如下：

document$

 windowopera ? documentcompatMode   ? $ $ $

$
scrollTop $top 
 false

說明：直接看註解

$('#top ').click(function(){...}); 這是滾動基本程式碼，可以根據自個情況變通，也就是舉一反三了，如：既然可以回到頂部，那麼就可以滾動到底部、滾動到某一個id、滾動到中間…

那麼我再貼出一個滾動到「評論框」的例子：

例子前提假如：文章標題下面有個“新增評論”，原來的html如下

<p id="add-comment"><a href="#respond"></a></p>

（註：#respond 是評論框的id）

那麼$('#top').click(function(){.. .}); 這段程式碼就變成如下：

$
scrollTop $top 
 false

這樣就行了，簡單不？有些朋友說原理，學jQ去吧

更多的方法去Willin 的《頁面Scroll  的幾種方法》

宣告: 本文採用BY-NC- SA 協定進行授權| ZWWoOoOo
轉載請註明轉自《用jQuery 實現頁面滾動（Scroll）效果的完美方法》

閱讀全文
類別：Javascript 查看評論

以上是用 jQuery 實現頁面滾動（Scroll）效果的完美方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！