jquery锚点平滑滚动到指定位置
文章描述:
jquery锚点平滑滚动到指定位置,直接滚动到指定位置给用户的体验不好!
html
<a href="#section_04" class="topLink">link</a>
<div class="container">
<section class="section_01" id="section_01">1</section>
<section class="section_02" id="section_02">2</section>
<section class="section_03" id="section_03">3</section>
<section class="section_04" id="section_04">4</section>
<section class="section_05" id="section_05">5</section>
<section class="section_06" id="section_06">6</section>
<section class="section_07" id="section_07">7</section>
</div>
script
//锚点平滑滚动
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
},{
duration: 600,
easing: "linear"
});
return false;
});
css
.container{ padding:10px 0; }
.topLink{ font-size:16px; padding:5px 10px; background:#09F; color:#fff; text-align:center; text-decoration:none; border-radius:5px; }
section{ width:100%; height:400px; background:#CCC; border-bottom:1px solid #fff; font-size:1.2em; text-align:center; line-height:400px;}
发布时间:2022/04/28
发表评论