jQuery實現頁面內錨點平滑跳轉特效的方法總結

最後更新：2015-05-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　通過jQuery實現頁面內錨點平滑跳轉的方法很多，可以通過外掛程式hovertreescroll實現，也可以簡單的通過animate方法實現，下面介紹這2種比較簡單的方法。

　　平時我們做導航滾動到內容都是通過錨點來做，刷的一下就直接跳到內容了，沒有一絲的滾動效果，而且 url 連結最後會有“小尾巴”，就像#keleyi，今天我就介紹一款 jquery 做的滾動的特效，既可以設定捲動速度，又可以在 url 連結上沒有“小尾巴”。

<!DOCTYPE html>

<html>

<head>

<title>jQuery實現頁面內錨點平滑跳轉</title><base target="_blank" />

#hovertree {

height: 800px;

background: red;

text-align:center;color:white;

}

#keleyi {

height: 800px;

background: green;text-align:center;color:white;

}

#myslider {

height: 800px;

background: black;text-align:center;color:white;

}

#zonemenu {

height: 800px;

background: yellow;text-align:center;

}

.keleyilink{position:fixed;}

.keleyilink a {text-decoration:none;}

</style>

</head>

<body>

<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a>

<a href="javascript:scroll('myslider');" target="_self">myslider</a>

<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a>

</div>

<div id="hovertree">hovertree

<br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效庫</a>

</div>

<div id="myslider">myslider</div>

<div id="zonemenu">zonemenu</div>

function scroll(id) {

$("#" + id).HoverTreeScroll(1000);

}

</script>

</body>

</html>

　　更簡單點的實現方法：

　　代碼只有一句話

　　複製代碼代碼如下:

　　$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

　　animate()方法用來實現一組css的自訂動畫，有兩種調用方法

　　第一種形式接受4個參數，如下所示

　　.animate( properties [, duration] [, easing] [, complete] )

　　properties – 一個包含樣式屬性及值的映射

　　duration – 可選的速度參數，既可以是預置的字串，也可以是一個毫秒數值

　　easing – 可選的緩動類型，jquery預設的只有兩種：swing和linear,要使用其它效果需要安裝緩動類的外掛程式

　　complete – 可選的回呼函數，在動畫結束時被調用

　　第一種形式的樣本如下

.animate({property1: 'value1', property2: 'value2'},

speed, easing, function() {

alert('The animation is finished.');

});

　　本文實現錨點跳轉的代碼使用了第一種形式

　　$("html,body")代表對html或body元素進行動畫，即要改變他們的css屬性值

　　scrollTop是要改變的屬性值，表示捲軸滑過的距離，在這裡表示向下拉動瀏覽器捲軸後html(body)被瀏覽器頂端隱藏的高度

　　$("#elementid").offset().top就是html(body)需要被瀏覽器頂端隱藏的高度，它代表id為elementid的元素頂端到網頁頂端(不是瀏覽器可視地區頂端)的絕對距離。

　　1000是指動畫時間為1秒

　　animate()方法還有第二種調用形式

　　.animate( properties, options )

　　一個是屬性對應，一個是選項映射。實際上這裡的第二個參數是把第一種形式的第2-4個參數封裝在另一個映射中，同時又添加了兩個選項。第二種形式的代碼如下：

.animate({

property1: 'value1',

property2: 'value2'

}, {

duration: 'value',

easing: 'value',

complete: function(){

alert('The animation is finished.');

queue: boolen,

step: callback

});

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More