JQuery實現(xiàn)<a>標簽平滑滾動到指定節(jié)點位置代碼片段
風信建站項目開發(fā)過程中應(yīng)用到使用animate動畫函數(shù)實現(xiàn)<a>標簽平滑滾動到指定節(jié)點位置,這種效果比起使用scroll到指定地點,用戶在體驗中會感覺更平滑,當然兩種方法各有所長,分享項目實戰(zhàn)片段代碼如下:
HTML代碼:
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 navbar-fixed-top">
<h1 class="logo"><a href="">?快樂校外</a></h1>
</div>
<div class="col-lg-8 col-md-offset-3">
<ul id="navmenu">
<li><a href="/" title="首頁">?首頁</a></li>
<li><a href="#teacher" class="topLink" title="?瀏覽教師">?瀏覽教師</a></li>
<li><a href="/" title="開始約課">?開始約課</a></li>
<li><a href="#process" class="topLink" title="上課流程">?上課流程</a></li>
<li><a href="/" title="最新動態(tài)">最新動態(tài)</a></li>
</ul>
</div>
</div>
</div>
JQuery代碼:
$(document).ready(function() {
$("#navmenu li a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 1000,
easing: "swing"
});
return false;
});
});
效果截圖如下:
風信建站項目開發(fā)過程中應(yīng)用到使用animate動畫函數(shù)實現(xiàn)<a>標簽平滑滾動到指定節(jié)點位置,這種效果比起使用scroll到指定地點,用戶在體驗中會感覺更平滑,當然兩種方法各有所長,分享項目實戰(zhàn)片段代碼如下:
HTML代碼:
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 navbar-fixed-top">
<h1 class="logo"><a href="">?快樂校外</a></h1>
</div>
<div class="col-lg-8 col-md-offset-3">
<ul id="navmenu">
<li><a href="/" title="首頁">?首頁</a></li>
<li><a href="#teacher" class="topLink" title="?瀏覽教師">?瀏覽教師</a></li>
<li><a href="/" title="開始約課">?開始約課</a></li>
<li><a href="#process" class="topLink" title="上課流程">?上課流程</a></li>
<li><a href="/" title="最新動態(tài)">最新動態(tài)</a></li>
</ul>
</div>
</div>
</div>
JQuery代碼:
$(document).ready(function() {
$("#navmenu li a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 1000,
easing: "swing"
});
return false;
});
});
效果截圖如下: