天貓,京東各大網站錨點的跳轉
阿新 • • 發佈:2019-01-30
// 點選導航
<div class="left_bar" style="">
<a class="bar_one" href="#s_1"><span class="bar_span">網店</span>
<span class="bar_span2">裝修</span>
</a>
<a class="bar_two" href="#s_2">
<span class="bar_span">首頁</span>
<span class="bar_span2">裝修</span>
</a>
<a class="bar_three" href="#s_3">
<span class="bar_span">詳情</span>
<span class="bar_span2">裝修</span>
</a>
<a class="bar_four" href="#s_4">
<span class="bar_span">活動</span>
<span class="bar_span2">裝修</span>
</a>
<a class="bar_five" href="#s_5">
<span class="bar_span">海報</span>
<span class="bar_span2">裝修</span>
</a>
<a class="bar_six" href="#s_6">
<span class="bar_span">其它</span>
<span class="bar_span2">需求</span>
</a>
</div>
// 跳轉的目的地
<div id=''s1"></div>
<div id=''s2"></div>
<div id=''s3"></div>
<div id=''s4"></div>
<div id=''s5"></div>
<div id=''s6"></div>
/*錨點的滑動效果*/ |
$(".left_bar > a").click(function() { |
$("html, body").stop(true,false).animate({ |
scrollTop: $($(this).attr("href")).offset().top +"px" |
}, { |
duration: 500, |
easing: "swing" |
}); |
return false; |
}); |