jQuery实现页面内锚点平滑跳转特效的方法总结

2024-05-06 16:19:51

字体：大中小

来源：转载

供稿：网友

通过jQuery实现页面内锚点平滑跳转的方法很多，可以通过插件hovertreescroll实现，也可以简单的通过animate方法实现，下面介绍这2种比较简单的方法。

平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 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>