如何实现网站锚点链接平滑滚动

做锚点链接的方法

①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）

创新互联是一家专注于成都网站设计、做网站、成都外贸网站建设公司与策划设计,祁县网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:祁县等地区。祁县做网站价格咨询:18980820575

②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容。

锚点链接平滑滚动

一般使用锚点来跳转到页面指定位置的时候，会生硬地立即跳转到指定位置，但是有些时候我们想要平滑地过渡到指定的位置，那么可以使用JQuery简单的实现平滑滚动效果。

只需要在网站的底部代码</body>上面添加以下的代码就可以了。

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('a[href*=#],area[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){
   vartargetOffset=$target.offset().top;
    $('html,body').animate({
     scrollTop:targetOffset
   },
   1000);
   returnfalse;
  }
 }
});
})
</script>            

                网站名称：如何实现网站锚点链接平滑滚动
                

                文章起源：https://www.cdcxhl.com/article46/egcoeg.html
            

            

                成都网站建设公司_创新互联，为您提供App设计、手机网站建设、网站改版、建站公司、静态网站、移动网站建设            

            

                广告
                
            

            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            

        

        

            
猜你还喜欢下面的内容

            
        

    


    

        成都网页设计公司
        

            
网站制作知识

            
        

        

            
行业网站建设