轉自: http://zww.me/archives/25144
很多博主都寫過/轉載過用 jQuery 實現頁面滾動(Scroll)效果的方法,但目前搜來的方法大都在 Opera 下有個小 Bug:直接用跳的而且畫面閃爍。
今天,超級低調的高手 Willin 共享了一種完美方法解決 jQuery 實現滾動效果在 Opera 下的bug,我隨即調試+應用到我目前的主題,目前經過測試非常完美,特意貼出代碼加以說明。
因為本人不太懂 js,jQuery 也只是皮毛,原理方面我說不清楚,只能說明修改方法。
演示:點擊現在的主題 zOM 底部的“Δ”/文章頁面標題下面的“x comments” “Leave a comment”
假設:你的主題最上面的 id 是 header,最下面的“返回頂部”的 id 為 top
jQuery 代碼如下:
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');// 這行是 Opera 的補丁, 少了它 Opera 是直接用跳的而且畫面閃爍 by willin
$('#top').click(function(){
$body.animate({scrollTop: $('#header').offset().top}, 1000);
return false;// 返回false可以避免在原鏈接后加上#
});
});
說明:直接看注釋
$('#top').click(function(){...}); 這是滾動基本代碼,可以根據自個情況變通,也就是舉一反三了,如:既然可以返回頂部,那么就可以滾動到底部、滾動到某一個 id、滾動到中間……
那么我再貼出一個滾動到“評論框”的例子:
例子前提假如:文章標題下面有個“添加評論”,原來的html如下
<div id="add-comment"><a href="#respond"></a></div>
(注:#respond 是評論框的 id)
那么 $('#top').click(function(){...}); 這段代碼就變為如下:
$('#add-comment').click(function(){
$body.animate({scrollTop: $('#respond').offset().top}, 1000);
return false;
});
這樣就行了,簡單不?有些朋友說原理,學jQ去吧
更多的方法去 Willin 的《頁面 Scroll 的幾種方法》
http://www.cnblogs.com/yangbo108/archive/2007/08/29/874014.html