[转]用 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