html平滑滚动瞄点效果代码。

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

引入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,转载请注明出处。

0
金秋上云特惠新人专享

评论0

本站所有素材,站长均亲自测试过,可放心使用,有什么问题联系我们!18091738064(微信)

社交账号快速登录

Copyright   ©2017-2021  U码80  陕ICP备17013443号-1  

陕公网安备 61032402000158号