首頁 > web前端 > js教程 > 用 jQuery 實現頁面滾動(Scroll)效果的完美方法

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

巴扎黑
發布: 2017-06-29 09:39:06
原創
1708 人瀏覽過

以前很多部落客都寫過/轉載過用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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板