用 jQuery 实现页面滚动(Scroll)效果的完美方法

以前很多博主都写过/转载过用 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 的幾種方法

zww
or
oooo

“用 jQuery 实现页面滚动(Scroll)效果的完美方法”有101条评论

  1. jQuery是个好东西。

  2. xux says:

    这个貌似就是回到顶部?

    不知道有没有类似浏览器的侧边,按一下上升几个,不要一下子到底。

    1. zwwooooo says:

      @xux 你说的ff就有,直接按鼠标中键 - -

  3. 张小亮 says:

    不错,用上了,谢谢分享~ :mrgreen:

  4. 菜牛 says:

    这个很有用,回头研究一下。

  5. 朵未 says:

    呵呵,是旁边的嫩绿的小东西吧。 :lol:

    1. zwwooooo says:

      @朵未 今天下午刚加的

  6. 朵未 says:

    额,邮箱又输错了。

  7. 郑永 says:

    这次好像效果好多了,呵呵

    1. zwwooooo says:

      @郑永 以前效果不好么?你也不是用op

  8. 猪八戒 says:

    对我来说有点高深了。

  9. 郑州seo says:

    我也是第一次接触wp 感觉特复杂

    1. zwwooooo says:

      @郑州seo 折腾多了就熟悉了

  10. derek says:

    Willin出品,必属精品啊 :mrgreen:

  11. Jutoy says:

    我用的貌似就素这个~ :mrgreen:

  12. 过来纯粹是帮你点广告的~

    1. zwwooooo says:

      @ikeeptrying 感谢,节日快乐

  13. Firm says:

    大大高手都是在默默的研究中的

    1. zwwooooo says:

      @Firm 拿来用而已

  14. 小可人 says:

    JQuery框架是JavaScript语言的一个新的资源库 ,它最大的性能:快速,简洁的使用HTML documents, handle events, perform animations,而且还可以能把Ajax交互应用到网页。

    1. zwwooooo says:

      @小可人 所以很受欢迎

  15. 龙崽 says:

    现在没空学这些,等放假了玩玩,哈哈 :?:

    1. zwwooooo says:

      @龙崽 玩玩吧,很有意思的

  16. 任侠 says:

    说实话一直在想系统地学jQuery,却一直总有“合理的借口”没时间。。。得想想法子了

  17. reizhi says:

    我很懒,喜欢插件

  18. 于泽鹏 says:

    来看看!

  19. Lazyyyyyyyyyyy says:

    哈~我的blog也有回滚到顶部的,
    不过没研究过调用的js内容。
    没用过opera,不知道实际会遇到怎样的问题。。。

    1. zwwooooo says:

      @Lazyyyyyyyyyyy jQ看看手册一般就会懂点儿

  20. evlos says:

    强烈要求浏览器内置 jQuery 库 ~ :grin:

    1. zwwooooo says:

      @evlos 要是这样的话肯度速度很快

发表评论

昵称 *

网址

B em del U Link Code Quote