JQUERY实现锚点链接平滑滚动方法
在前面的Dreamweaver CS6视频教程中,我们介绍了Dreamweaver锚点链接制作方法,锚点链接在实际做网站过程中也会经常用到。但锚点链接有一个缺点,就是我们点击锚点链接某一栏目时就立即跳到相应的版块,用户体验很差。
今天学做网站论坛就来解决这个问题,让锚点链接实现平滑滚动。以下提供三点方法:
方法一:平滑滚动插件法
- 实现锚点链接平滑滚动,需要先入引JQUERY,它是基于JQUERY实现的。
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
- 下载平滑滚动插件。下载地址:链接: https://pan.baidu.com/s/1NW_GEhXiugkaKiZ4Dcxlvw 提取码: urxi
- 在</head>标签上面放上引入平滑滚动插件代码。(注意修改路径)
<script src="js/jquery.singlePageNav.min.js"></script>
- 最后是在</body>标签上面放上锚点链接平滑滚动控制JS代码。(注意修改代码里的class名称)
<script type="text/javascript">
$(function(){
/*导航跳转效果插件*/
$('.tabnav').singlePageNav({ });
})
</script> - 这样就实现了锚点链接平滑滚动了。
方法二:纯代码方法
先在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锚点的情况下,实现平滑滚动到指定位置。
谢谢