欢迎访问晨星博客！

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

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

    |
    评论 1 条
    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 条评论

    默认头像游客
    请登陆后再发表您的观点吧！

    最新评论

    账号登陆

    快捷登陆
    热搜词