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

轉自： 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

http://fluagen.blog.51cto.com/146595/405607

https://www.google.com.hk/search?newwindow=1&safe=strict&espv=210&es_sm=93&q=jquery%E6%8E%A7%E5%88%B6%E6%BB%9A%E5%8A%A8%E6%9D%A1%E4%BD%8D%E7%BD%AE&oq=jquery+%E6%8E%A7%E5%88%B6%E6%BB%9A%E5%8A%A8&gs_l=serp.3.1.0i12i2l2j0.219064.224947.0.227462.18.16.0.0.0.1.587.2206.3-3j0j2.5.0....0...1c.1j4.32.serp..14.4.1661.TCjxvjyOT3U