perfume's space

愛したのはたしかに君だけ そのままの君だけ

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

2010-07-17

网上流传的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小菜一个,高手勿笑,有什么不足的地方请指点 ^_^

12 个留言

香水 2011/10/26 - 11:12:27

test

立青 2010/09/16 - 01:45:35

你这个站点的效果真好,QQ空间的效果,东西收下了,谢谢

吉光片羽 2010/09/5 - 15:09:09

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

coo 2010/08/19 - 00:41:19

呵呵,佩服

企业网站建设 2010/08/9 - 18:11:10

你这个theme好有特色。

花蓮民宿 2010/08/5 - 14:07:06

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

deeplane 2010/07/23 - 10:39:58

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

香水 2010/07/23 - 15:26:15

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

就这一段

BoKeam 2010/07/22 - 11:09:31

右边链接那种效果嘛

香水 2010/07/22 - 16:03:04

不是,是底部top的效果

winy 2010/07/19 - 14:55:45

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

香水 2010/07/19 - 14:57:42

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

留言