Wordpress主题交流群:565616228 进群记得看公告!

锚链接平滑滚动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条评论

  • 小飞鱼  

    这个也要收藏

昵称*

邮箱*

网址