Border的快樂生活記錄

以前我們在html標籤裡常用的錨點 <a name"XX"></a>  <a href="#XX"></a>

這個有基礎的人應該很孰悉了 

但是這種移動的效果  實在是太快了  不夠有美感   

所以  如果用Jquery來製作  能加上動態移動的效果

移動的過程   看起來就會比較舒服

先來看範例    http://i-rich.tw/border_blog/sample6/

點了上面的連結  卷軸會捲到指定的區塊位置上

這部分必須要知道兩個Jquery的方法

1. 指定捲軸位置  scrollTop(數值)  要使用這個方法  必須先抓到bod物件

2.動態移動效果 animate

我們先看看

HTML的部分

<div class="me_buy">
   <a href="javascript:void(1)" data-id="1">到區塊1</a>
   <a href="javascript:void(1)" data-id="2">到區塊2</a>
   <a href="javascript:void(1)" data-id="3">到區塊3</a>
</div>

略
<h3 id="area1">區塊1</h3>
略
<h3 id="area2">區塊2</h3>
略
<h3 id="area3">區塊3</h3>
略

js的部分

$(function(){

   // 偵聽a click
   $(".me_buy a").bind("click",function(){

       var id=$(this).attr("data-id");

       // 取得目標區塊的y座標
       var target_top = $("#area"+id).offset().top;

       // 取得body物件 這種寫法在各瀏覽器上最保險
       var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');

       // 移動捲軸無動畫效果
     		//$body.scrollTop(target_top);

       // 移動捲軸有動畫效果
     		$body.animate({
     			  scrollTop: target_top
     		}, 800);

   })
})

提供給大家參考

謝謝