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链接
		         }
		    }
	});

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

Tags:

14 Responses To This Post So Far(Rss)

  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. @

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

    2010/06/06 16:11
    • @ crossyou

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

      2010/06/06 23:30
  4. @ heroicYang

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

    2010/06/06 21:31
    • @ crossyou

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

      2010/06/06 23:29
  5. @ 樊文生

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

    2010/06/06 21:42
    • @ crossyou

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

      2010/06/06 23:29
  6. @ 集思

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

    2010/06/06 23:55
    • @ admin:

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

      2010/06/07 07:34
  7. @ LOO2K

    我用的是 scrollTo 插件.

    2010/06/30 18:28
  8. @ zchiy2k

    这段代码写得确实好。

    2010/07/05 18:49
Leave a Reply

在线博友
Working...