JQUERY实现锚点链接平滑滚动方法

在前面的Dreamweaver CS6视频教程中，我们介绍了Dreamweaver锚点链接制作方法，锚点链接在实际做网站过程中也会经常用到。但锚点链接有一个缺点，就是我们点击锚点链接某一栏目时就立即跳到相应的版块，用户体验很差。

今天学做网站论坛就来解决这个问题，让锚点链接实现平滑滚动。以下提供三点方法：

方法一：平滑滚动插件法

1. 实现锚点链接平滑滚动，需要先入引JQUERY，它是基于JQUERY实现的。

   
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   
   

2. 下载平滑滚动插件。下载地址：链接: https://pan.baidu.com/s/1NW_GEhXiugkaKiZ4Dcxlvw 提取码: urxi
3. 在</head>标签上面放上引入平滑滚动插件代码。（注意修改路径）

   
   <script src="js/jquery.singlePageNav.min.js"></script>
   
   

4. 最后是在</body>标签上面放上锚点链接平滑滚动控制JS代码。（注意修改代码里的class名称）

   
   <script type="text/javascript"> 
   
   
   
   $(function(){
   
           /*导航跳转效果插件*/
   
            $('.tabnav').singlePageNav({ });         
   
            })
   
   
   
   </script>
   
   

5. 这样就实现了锚点链接平滑滚动了。

方法二：纯代码方法

先在HTML代码里做好锚点链接：

<a href="#xwz-free-kclist">新手学习做网站免费基础入门课程</a>

在页面的底部放上控制平滑滚动的JQUERY代码：

<script>

$(document).ready(function() {

$("a.topLink").click(function() {

$("html, body").animate({

scrollTop: $($(this).attr("href")).offset().top + "px"

}, {

duration: 500,

easing: "swing"

});

return false;

});

});

</script>

这样就可以实现锚点平滑滚动了。

方法三：无需A标签的锚点链接

HTML代码：

<div class="box a">到此处！</div>

JS代码：

<script type="text/javascript">

jQuery(document).ready(

function($){

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);

});

});

</script>

这样可以实现不加A锚点的情况下，实现平滑滚动到指定位置。