以前很多博主都写过/转载过用 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 的幾種方法》
声明: 除非注明，ZWWoOoOo文章均为原创，转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25144
今天差点一激动买125元/月的VPS，正...
强烈要求浏览器内置 jQuery 库 ~
@evlos 要是这样的话肯度速度很快
看不太懂
@一心而已 呃，不会吧，那就直接找着做
学习一下
学习了
效果不错~~
还有中间的滚动箭头也不错。。 呵呵
请问一下这个“ 提交成功, 刷新頁面之前可以再編輯”是怎么实现的啊？
看样子不是插件。。很好用。。
@deja.vu willin 折腾的ajax嵌套评论提交代码自带的，具体看 http://zww.me/archives/24365 文章后面
又看了一遍，发现我还是不懂呗。。。。失败
@球犯 囧～1. 加载jq库 2.把第一个jq代码存为js文件并加载 3.给要点击滚动的地方加入id/class(跟jq里面的id/class相同) 4.编写css
@fin 哈哈，评论的时候、无聊的时候就点一点
看了，感觉可以，不过暂时不加这个功能
这段是滚到top的嘛，$body的设定，我也是最近几天才学的
@无冷
慢慢折腾
原来这一句是为了解决opera下的BUG，没用过opera，现在知道了。
@sprityaoyao
兼容很烦的
不知道能不能在下拉的时候才出现 向上的指示。。
@额we
可以，你可以搜一下
@zwwooooo
我是说在你上面的代码实现，不是用其他jq插件，不知道可不可以。
@zwwooooo
就是以你上面的代码为基础， 不知道能不能实现，
@额we
只要会点jQ就会，我是懒得折腾了，你看看手册吧。
看看效果,是不是我想要的