html錨點 點擊跳轉到頁面指定位置

標籤：興趣   mct   gpg   topic   類型   eve   gen   kdbg   連結   

本來是在看阮大神寫的ajax教程，突然發現點擊目錄文字會跳轉到相對應的常值內容，於是乎激發了我的興趣。

這個究竟怎麼做的，剛開始看的時候一知半解，找度娘就是：“點擊跳轉到頁面指定位置”，找了下，原來專業術語叫：錨點。

度娘真是個博大精深的地方，有著多種的方法可以使用。

最簡單的一種：

設定a標籤的錨點就行啦，但是有個確定連結會更改，不利於重新整理

<div class="skip" id="skip">    <h2>目錄</h2>    <ul>        <li>            <a href="#toc0" class="aaa">點擊文字跳轉</a>            <!--herf的值一定要帶#號，並且要和相對應要跳轉的值一致-->        </li>    </ul>    <div class="chapter" style="margin-top: 850px;">        <a name="toc0" class="aaa1">文字跳轉到這裡</a>        <!--這裡的a標籤可以用name也可以用id-->        <p>心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假            心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假</p>    </div></div>

第二種方法是根據animate的方法來移動

animate(params, [duration], [easing], [callback])

建立自訂動畫，注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.

例子：

// 在一個動畫中同時應用三種類型的效果$("#go").click(function(){  $("#block").animate({     width: "90%",    height: "100%",     fontSize: "10em", //駝峰    borderWidth: 10  }, 1000 );});

將上面的html中的a標籤去掉#toc0

js代碼

$(".aaa").click(function () {    $(‘html,body‘).animate({        scrollTop:$(".aaa1").offset().top},{duration:500,easing:‘swing‘});    return false;})

以上總結的兩種是常用且相容比較好的，較為簡單的

也可參考複雜的案例

http://www.jb51.net/article/96574.htm

http://bbs.csdn.net/topics/390960199?page=1

 

html錨點 點擊跳轉到頁面指定位置