欢迎访问晨星博客!

  • 当前位置: 首页 Web前端 正文

    锚链接平滑滚动JQuery特效代码

    文章目录
    1. html代码分享
    2. JQuery特效代码
    3. 使用说明

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个动画效果,像我博客用的文章目录模块就是用的a标签进行模块跳转的大家可以测试下效果。

    html代码分享

    1. <ol id=“index-ul”>
    2.     <li><a href=“#title-0” class=“title-dw” rel=“nofollow” title=“锚点1”>锚点1</a></li>
    3.     <li><a href=“#title-1” class=“title-dw” rel=“nofollow” title=“锚点2”>锚点2</a></li>
    4.     <li><a href=“#title-2” class=“title-dw” rel=“nofollow” title=“锚点3”>锚点3</a></li>
    5.     <li><a href=“#title-3” class=“title-dw” rel=“nofollow” title=“锚点4”>锚点4</a></li>
    6. </ol>
    7. <h2 id=“title-0”>锚点1</h2>
    8. <h2 id=“title-1”>锚点1</h2>
    9. <h2 id=“title-2”>锚点1</h2>
    10. <h2 id=“title-3”>锚点1</h2>

    为了能让锚点平滑跳转到指定位置,我们需要一段JQuery代码来控制移动的特效,下面这一段是我现在在用的代码:

    JQuery特效代码

    1. <script>
    2. $(document).ready(function() {
    3.   $(“a.title-dw”).click(function() {
    4. //”a.title-dw” title-dw是啊标签的css选择器class=”title-dw”.
    5.     $(“html, body”).animate({
    6.       scrollTop: $($(this).attr(“href”)).offset().top+-50+“px”
    7. //.offset().top+-50+”px”这里是设置跳转位置偏移值.
    8.     }, {
    9.       duration: 500,
    10.       easing: “swing”
    11.     });
    12.     return false;
    13.   });
    14. });
    15. </script>

    使用说明

    使用上面的代码需要注意几点,代码中我也简单的标注了一下就是跳转位置偏移值,由于现在很多网站都有在顶部固定的导航菜单,这个会占用一定的高度,如果我们不设置偏移值的话,目标模块会被导航栏遮盖一部分,上面的+-50+"px"就是向下偏移50px如果不需要偏移可以把这个改成+"px"即可!

    声明:原创文章请勿转载,如需转载请注明出处!

    • 共 1 条评论

    请登陆后再发表您的观点吧!

    最新评论

    1. 小飞鱼

      这个也要收藏

    账号登陆

    快捷登陆