jQuery代码实现Web页内锚点scoll效果

方法原作者:http://www.learningjquery.com

//页内锚点滑动效果,来自http://www.learningjquery.com/的方法

$('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname){
    var $target = $(this.hash);
    $target = $target.length && $target|| $('[name=' + this.hash.slice(1) +']');
    if ($target.length) {
            var targetOffset = $target.offset().top;
            $('html,body').animate({scrollTop: targetOffset}, 1000);
            //return false; //使其呈现清晰的URL链接
            }
    }
});

发现网上这段代码被各个站粘贴,以致我也不太清楚原作是谁了,我还是比较相信国外的那些大牛,不过这段代码确实值得转帖分享,在本小站再次分享。

这篇文章目前有15条评论

  1. 万戈 2010-06-04 19:35

    我用的也是这招,不知道作者是哪位高人

    沙发王 !
    • admin 2010-06-04 21:17

      哈哈,有些代码就是经典。
      我也不知道是哪位高人。

  2. ifenwen 2010-06-05 11:20

    貌似你的网站上没有用到此效果阿

    板凳党 !
    • admin 2010-06-05 12:13

      是的,
      我在别的地方用了,
      嘿嘿。

  3. 2010-06-06 16:11

    想学习一下PHP,CSS什么的呢,可是看见这一堆代码…晕了 (困)

    地板砖 !
    • crossyou 2010-06-06 23:30

      等不晕的时候就入门了,嘿嘿。

  4. heroicYang 2010-06-06 21:31

    很多比较有用的代码都该收藏一下。虽然现在用不着,但是我相信今后会用到的。

    4 #
    • crossyou 2010-06-06 23:29

      这段代码确实不错,很多人都在用。

  5. 樊文生 2010-06-06 21:42

    多谢楼主分享,这个在评论时很有用

    5 #
    • crossyou 2010-06-06 23:29

      不过在我博客里没有用这个功能,呵呵

  6. 集思 2010-06-06 23:55

    找了好久才找到验证效果的地方 (囧) 原来在footer!

    6 #
    • admin 2010-06-07 07:34

      我博客上没有使用,footer哪里 (囧) 用的不是这种方法。

  7. LOO2K 2010-06-30 18:28

    我用的是 scrollTo 插件.

    7 #
  8. zchiy2k 2010-07-05 18:49

    这段代码写得确实好。

    8 #
  9. 2011-07-07 09:38

    (鸭梨) 看不懂 谁可以帮我解释下啊

    9 #
Leave a Reply

(必填项)

(必填项)

(可选)