jQuery滑动锚点

无需jQuery的只需要href=”#xulgr” 然后 id=”xulgr” 就能直接锚点,但这样不美观,我来弄个jQuery的吧

首先,头部引入jQuery库

<script src="https://code.xulgr.com/pub/js/jquery-1.8.2.min.js"></script>

然后在<head>内放js

<script type="text/javascript">
  jQuery(document).ready(function($) {
   $(".xulgr-md a").click(function(event) {  //.xulgr-md a为指定样式
      var id='#'+'xulgr' //xulgr为id值
     $("html,body").animate({scrollTop: $(id).offset().top-50}, 1000); //top-50是在执行后距顶再下50px;1000是1秒执行完成
   });
});
</script>

点击代码如下:

<div class="xulgr-md">		
<a href="javascript:void(0)">点击JQ锚点</a>
</div>

指定锚点的地方加id值即可

<div id="xulgr">
锚点
</div>

 

运行代码

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
  • ZSBT666

    昵称

  • 取消
    昵称