jQuery實作頁面內錨點平滑跳轉特效的方法總結_jquery
- WBOY原創
- 2016-05-16 15:59:561331瀏覽
平常我們做導航滾動到內容都是透過錨點來做，刷的一下就直接跳到內容了，沒有一絲的滾動效果，而且url 連結最後會有“小尾巴”，就像#keleyi，今天我就介紹一款jquery 所做的滾動的特效，既可以設定滾動速度，又可以在url 連結上沒有「小尾巴」。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" />
<style type="text/css">
#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>
<div class="keleyilink">
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a>
<a href="javascript:scroll('keleyi');" target="_self">KKK</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="keleyi">jb51</div>
<div id="myslider">myslider</div>
<div id="zonemenu">zonemenu</div>
<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery.hovertreescroll.js"></script>
<script>
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
});
以上所述就是本文的全部內容了，希望大家能夠喜歡。