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

发表评论