您的位置：首页 > Web前端 > JQuery

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

2017-03-09 09:43 756 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  锚点链接 jquery滚动 html页面滑动 html5锚点
相关文章推荐
新的分享
章节导航