JQuery 实现锚点链接之间的平滑滚动

  最近发现我喜欢上玩 JQuery 了,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了。比如说木木介绍过的 Tab 切换效果Sweet Titles 标题效果,不过我感觉 Sweet Titles 和链接平移 JQuery 特效同时使用时会在 IE 下表现迟缓,所以忍痛割爱去掉了 Sweet Titles。

  从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动。以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码实现相同的效果。

  方法如下:

  1、载入 JQuery 库,这个不用多说了吧,是前提,是必须,个人推荐 JQuery 1.2系列的版本。

  2、关键代码:

$(document).ready(function() {
    $('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;
            }
        }
    });
});

  还是再要强调一下加载的顺序,JQuery 先。顺便说一下,经测试,该滚动效果在各浏览器下都兼容适用,唯有在 Opera 下表现有点怪异,无法用言语表达,用 Opera 的朋友试试看就知道了。

  现在我的 JS 代码超精简,哈哈,童鞋们还有啥好玩的 JQuery 特效,速速推荐来。

本文已盖 55 层楼

  1. 果然 ,在opera下那个移动相当的郁闷啊

  2. 回复 宅男 说:

    :mrgreen: :mrgreen:
    今天我用这个代码替换了博客里的代码。记录一下

  3. 回复 小闇 说:

    嗚哇 :eek: 一直忘了要加jQuery(document).ready(function($){那句在代碼的最前方,不管怎樣都不能折騰成功啊啊啊啊 :???:
    幸好在折騰第5次之後終於記住了(筆記下來)

  4. 回复 兜兜 说:

    不会,观望中。

  5. 回复 皓辰 说:

    看了半天,不错,就是不知道效果到底在哪…… :cry:

  6. 回复 林木木 说:

    万哥终于也被jQuery征服了!

  7. 回复 iBoluo 说:

    呃,先把 CSS 弄懂了再折腾 JQuery :cool:

  8. 没沙发,就做个板凳了,没事儿过来学习一下,嘿嘿

  9. 回复 Jclyn 说:

    大半夜的
    咱来一趟也不容易

  10. 回复 hzlzh 说:

    加油多折腾,我就爱用现成的 :roll:

  11. :oops: 老万好像真的迷上这个了啊。。。 :wink:

  12. ~~~玩出心得来了,还好WP没有知觉啊 :twisted:

  13. 回复 Firm 说:

    JQuery玩上瘾了

  14. 回复 小明猪 说:

    之前本来还想用jquery做一个特殊的主题出来分享的说,但是时间哪.... :arrow:

  15. 回复 小明猪 说:

    哈哈,jquery还是很强滴,还有更多好玩的东西哟~ :lol:

  16. 回复 星网 说:

    :eek: 。。。我没话说了~~! 我真没话说了~! :arrow:

  17. 回复 Google不爱我 说:

    “Tab切换效果”的链接404了?!

  18. 回复 zwwooooo 说:

    jQuery 在 op 下有很多很怪异的,连页面滚动也有问题,纳闷

  19. 回复 午夜 说:

    我擦,我不干啊。地板很凉的。

  20. 回复 Nox 说:

    板凳坐上。 :twisted:

  21. 回复 闪闪的星 说:

    嗯?

  1. WordPress 主題製作學習筆記:幫你的主題加上 jQuery 特效「圖片顯隱+平滑滾動」功能

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析