1. 程式人生 > >JS頁面錨點滑動

JS頁面錨點滑動

//主頁面

<html>

<head>

</head>

<body>

<div id='s_1' ></div>

<div id='s_2' ></div>

<div id='s_3' ></div>

<div id='s_4' ></div>

</body>

</html>

<!--左側邊欄-->
<div class="scrollBar">
<div class="scroll_item">
<a class="common_scroll scroll_1 scroll_now" href="#s_1">
<span class="icon iconfont">&#xe613;</span>
<span class="text">基本情況</span>
</a>
<a class="common_scroll scroll_2" href="#s_2">
<span class="icon iconfont">&#xe633;</span>
<span class="text">個人資訊</span>
</a>
<a class="common_scroll scroll_3" href="#s_3">
<span class="icon iconfont">&#xe600;</span>
<span class="text">服務對比</span>
</a>
<a class="common_scroll scroll_4" href="#s_4">
<span class="icon iconfont">&#xe62e;</span>
<span class="text">作品對比</span>
</a>
<a class="common_scroll scroll_5" href="#s_5">
<span class="icon iconfont">&#xe6c1;</span>
<span class="text">經歷對比</span>
</a>
</div>

</div>

JS

$(".common_scroll").click(function() {
var h=$($(this).attr("href")).offset().top;
    $("html, body").stop(true,false).animate({
      scrollTop: h +"px"
   }, {
    duration: 500,
      easing: "swing"
   });
    return false;
 });