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

2024-05-06 16:19:51

字體：大中小

供稿：網(wǎng)友

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jQuery實(shí)現(xiàn)頁面內(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 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>