jQuery實(shí)現(xiàn)頁(yè)面內(nèi)錨點(diǎn)平滑跳轉(zhuǎn)特效的方法總結(jié)

更新時(shí)間：2015年05月11日 09:06:01 投稿：hebedich

通過(guò)jQuery實(shí)現(xiàn)頁(yè)面內(nèi)錨點(diǎn)平滑跳轉(zhuǎn)的方法很多，可以通過(guò)插件hovertreescroll實(shí)現(xiàn)，也可以簡(jiǎn)單的通過(guò)animate方法實(shí)現(xiàn)，下面介紹這2種比較簡(jiǎn)單的方法。

平時(shí)我們做導(dǎo)航滾動(dòng)到內(nèi)容都是通過(guò)錨點(diǎn)來(lái)做，刷的一下就直接跳到內(nèi)容了，沒(méi)有一絲的滾動(dòng)效果，而且 url 鏈接最后會(huì)有“小尾巴”，就像#keleyi，今天我就介紹一款 jquery 做的滾動(dòng)的特效，既可以設(shè)置滾動(dòng)速度，又可以在 url 鏈接上沒(méi)有“小尾巴”。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery實(shí)現(xiàn)頁(yè)面內(nèi)錨點(diǎn)平滑跳轉(zhuǎn)</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 >HoverTree</a> <a href="/">特效庫(kù)</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>

更簡(jiǎn)單點(diǎn)的實(shí)現(xiàn)方法：

代碼只有一句話

復(fù)制代碼代碼如下:

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

animate()方法用來(lái)實(shí)現(xiàn)一組css的自定義動(dòng)畫，有兩種調(diào)用方法

第一種形式接受4個(gè)參數(shù)，如下所示

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

properties – 一個(gè)包含樣式屬性及值的映射
duration – 可選的速度參數(shù)，既可以是預(yù)置的字符串，也可以是一個(gè)毫秒數(shù)值
easing – 可選的緩動(dòng)類型，jquery默認(rèn)的只有兩種：swing和linear,要使用其它效果需要安裝緩動(dòng)類的插件
complete – 可選的回調(diào)函數(shù)，在動(dòng)畫結(jié)束時(shí)被調(diào)用

第一種形式的示例如下

.animate({property1: 'value1', property2: 'value2'},
    speed, easing, function() {
      alert('The animation is finished.');
    });

本文實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)的代碼使用了第一種形式

$("html,body")代表對(duì)html或body元素進(jìn)行動(dòng)畫，即要改變他們的css屬性值
scrollTop是要改變的屬性值，表示滾動(dòng)條滑過(guò)的距離，在這里表示向下拉動(dòng)瀏覽器滾動(dòng)條后html（body)被瀏覽器頂端隱藏的高度
$("#elementid").offset().top就是html（body)需要被瀏覽器頂端隱藏的高度，它代表id為elementid的元素頂端到網(wǎng)頁(yè)頂端（不是瀏覽器可視區(qū)域頂端）的絕對(duì)距離。
1000是指動(dòng)畫時(shí)間為1秒

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

.animate( properties, options )

一個(gè)是屬性映射，一個(gè)是選項(xiàng)映射。實(shí)際上這里的第二個(gè)參數(shù)是把第一種形式的第2-4個(gè)參數(shù)封裝在另一個(gè)映射中，同時(shí)又添加了兩個(gè)選項(xiàng)。第二種形式的代碼如下：

.animate({
  property1: 'value1',
  property2: 'value2'
}, {
  duration: 'value',
  easing: 'value',
  complete: function(){
    alert('The animation is finished.');
  },
  queue: boolen,
  step: callback
});

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: