js锚点滚动实例分享

配合bootstrap写出的。下面是干货： ul 的每个li的每个a中的href指向锚点目标，比如说<li class="active"><a href="#index">Home</a></li>。 下面给出我发现好的源代码：

$('#navbar-menu ul li a[href^="#"]').click(function(e){
                    e.preventDefault();
                    $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
                });

翻译一下：点击的时候，首先阻止了默认行为，然后让html,和body滚动动画，滚动到离顶部的距离为目标的offset().top的距离，在4毫秒内完成。hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分），所以this.hash是指当前的地址的#部分。关于this表示的对象，以后会总结。 
ps:$('body').scrollspy({ target: '#menu-nav' })这个bootstrap的scrollspy插件，自动监察目标滚动，从而改变相应的active，挺好的。

相关推荐：

Javascript实现导航锚点滚动效果实例

以上是js锚点滚动实例分享的详细内容。更多信息请关注PHP中文网其他相关文章！