html平滑滚动瞄点效果代码-U码80

平时做代码时候经常用到瞄点滑动效果，今天刚好一个客户需要这个做完之后我就贴上来啦。

引入JS

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(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) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
})
</script>

js里的是耗时1000毫秒。滚动时间

Html

<div class="top">
<a href="#index">首页</a>
<a href="#gongneng">功能</a>
<a href="#test">测试</a>
</div>

<div id="index" class="main" style="height:300px">
<h2>
<a href="###">首页</a>
</h2>
</div>

<div id="gongneng" class="main" style="height:300px">
<h2>
<a href="###">功能</a>
</h2>
</div>

<div id="test" class="main" style="height:2300px">
<h2>
<a href="###">测试</a>
</h2>
</div>

原文链接：https://www.um80.com/405.htm，转载请注明出处。