jQuery实现页面内锚点平滑跳转滑动效果

最新推荐文章于 2023-12-14 15:52:07 发布

Young-杨

最新推荐文章于 2023-12-14 15:52:07 发布

阅读量3.2k

点赞数

分类专栏：从入门到放弃文章标签：锚点链接 jquery滚动 html页面滑动 html5锚点

从入门到放弃专栏收录该内容

86 篇文章 1 订阅

订阅专栏

<!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">dsays</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="#"></a> <a href="#">HoverTree</a> <a href="#">特效库</a>  
</div>  
<div id="keleyi">keleyi</div>  
<div id="myslider">myslider</div>  
<div id="zonemenu">zonemenu</div>  
<script src="http://www.dsays.tv/v2/js/jquery-1.8.3.min.js"></script>  
<script src="http://www.dsays.tv/v2/js/jquery.hovertreescroll.js"></script>  
<script>  
	function scroll(id) {  
		$("#" + id).HoverTreeScroll(1000);  
	}  
</script>  
</body>  
</html>