如何利用jQuery來讓錨點連結有滑動的效果?
一般網頁文章太長的時候,我們會利用錨點來協助網友找到他要的資料。
錨點就像書籤一樣,當單一網頁的內容很多的時候,我們可以將內容分成數個段落,在每一段內容前面插入一個錨點,利用錨點超連結的功能,讓網頁在閱讀上好像分成數個獨立的章節一樣,方便網友閱讀。
範例:
<a href=”#section1”>前往第一段</a>
<a href=”#section2”>前往第二段</a>
<a href=”#section3”>前往第三段</a>
<a id=”section1”></a>
<h1>第一段</h1>
<p>Magento是以PHP開發的多商店購物車系統,只要一個後台系統,即可管理數個網路商店,不論是訂單或庫存管理、促銷設定等,商家都能輕鬆掌握,是經營電子商務的最佳系統。</p>
<a id=”section2”></a>
<h1>第二段</h1>
<p>SEO的全名是Search engine optimization ,中文為搜尋引擎優化。搜尋引擎是網路世界的查詢工具,搜尋結果的每一頁面就像是實體店面的陳列櫃,實體店面最好的櫃位就是搜尋排名的前三頁,排名越前就越容易讓大家看到,就像實體櫃位的主打商品,一眼望去就能吸引眾人目光。</p>
<a id=”section3”></a>
<h1>第三段</h1>
<p>在地SEO為結合在地資訊的搜尋引擎優化,根據搜尋者的所在地,找出符合當地的正確資訊,讓企業、商家和所在地的關係更為緊密。</p>
上面的範例,當按下連結時會直接跳到錨點的位置,若是我們想要滑動的效果,可以利用jQuery來達成。
<script>
$(function() {
$(‘a[href=#section1]’).click(function() {
$(‘html,body’).animate({
scrollTop:$(‘#section1’).offset().top
}, “show");
return false;
});
$(‘a[href=#section2]’).click(function() {
$(‘html,body’).animate({
scrollTop:$(‘#section2’).offset().top
}, “show");
return false;
});
$(‘a[href=#section3]’).click(function() {
$(‘html,body’).animate({
scrollTop:$(‘#section3’).offset().top
}, “show");
return false;
});
$(‘a[href=#section4]’).click(function() {
$(‘html,body’).animate({
scrollTop:$(‘#section4’).offset().top
}, “show");
return false;
});
});
</script>
上面的例子是針對每個連結獨立下指令,我們還可以進一步簡化:
<script>
$(function () {
$(‘a[href*=#]:not([href=#])’).click(function() {
var target = $(this.hash);
$(‘html,body’).animate({
scrollTop: target.offset().top
}, 1000);
return false;
});
});
</script>
如此即可利用jQuery讓錨點連結具備滑動的效果喔;若有相關問題,歡迎和我們連絡!
我要留言