页面载入中...请稍候

[热] 16行jQuery代码实现锚点scoll效果的修正版本

香水发表于2010年07月17日星期六 最后更新于2010年08月09日星期一评论:11条

归类于:模板插件 QQ书签 新浪微博 百度搜藏 美味书签 (Delicious) Google 书签

网上流传的16行的jQuery 代码就可以实现全站的锚点滑动效果，一直都不支持opera浏览器，今天在赶工星座网的时候，准备为底部添加返回头部的效果，又想到了这个代码，于是乎试着修改，将之前的body和html改为一个webkit内核浏览器和ie以及其他浏览器的判断，现在在ie6、7、8，chrome、firefox、opera和safari测试通过，完全正常，详细情况见本站滑动效果
以下是代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 $('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;
		var obj = document.documentElement; 
      if (jQuery.browser.safari) 
            obj = document.body
     if (jQuery.browser.msie) 
            obj = 'html';
       $(obj).animate({scrollTop: targetOffset}, 1000);
		return false;
      }
    }
  });

哥也只是js小菜一个，高手勿笑，有什么不足的地方请指点 ^_^

顶一下
(22)
75.86%
踩一下
(7)
24.14%

订阅本页评论 评论(11)

  1. 2010/07/19 - 14:55:45引用回复 1楼 winy

    我用的是Tiny Scrolling，锚点滑动效果一样。试试这个jQuery效果是平滑滚动的不
    PS：你的评论框记不住cookie，每次来要重填 :neutral:

    • 2010/07/19 - 14:57:42引用 香水

      是平滑滚动，cookie是因为开了静态化失效，dh空间慢呢，现在的主题还有很多问题待解决

  2. 2010/07/22 - 11:09:31引用回复 2楼 BoKeam

    右边链接那种效果嘛

    • 2010/07/22 - 16:03:04引用 香水

      不是，是底部top的效果

  3. 2010/07/23 - 10:39:58引用回复 3楼 deeplane

    右边链接的那种效果是用插件实现的？还是用什么方法，能说说吗，比较喜欢这样的效果，前面版本中好象你有到菜单上哦

    • 2010/07/23 - 15:26:15引用 香水 
      1
2
3
4
5

      $('#friends a , .post-list li').hover(function() { //mouse in
				$(this).animate({ paddingLeft:"15" },200);
			}, function() { //mouse out
				$(this).animate({ paddingLeft:"5" }, 200);
			});

      就这一段

  4. 2010/08/05 - 14:07:06引用回复 4楼 花蓮民宿

    正在找jquery scroll效果的問題就在你的文找到答案,
    感謝啦!

  5. 2010/08/09 - 18:11:10引用回复 5楼 企业网站建设

    你这个theme好有特色。

  6. 2010/08/19 - 00:41:19引用回复 6楼 coo

    呵呵，佩服

  7. 2010/09/05 - 15:09:09引用回复 7楼 吉光片羽

    看来还得补充一下JS基础。。。里面好多貌似固定含义的变量都第一次见的说。。。
    只知道 document.URL 没想到还可以用 hostname ？？

  8. 2010/09/06 - 16:51:32引用回复 8楼 杭州画室

    ok 我承认看不懂那个，呵呵

11条评论

发表评论

您已输入0字

书签

top