设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
搜索
热搜: 活动 交友 discuz
查看: 1805|回复: 0
打印 上一主题 下一主题

[Jquery] jQuery实现页面内锚点平滑跳转

[复制链接]
跳转到指定楼层
楼主
发表于 2015-9-20 09:50:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
[HTML] 纯文本查看 复制代码
<!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">Kevin-ying</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="http://www.kevin-ying.com">原文</a> <a href="http://www.kevin-ying.com">Kevin-ying</a> <a href="http://www.kevin-ying.com">HoverTree</a> <a href="http://www.kevin-ying.com">特效库</a>  
</div>  
<div id="keleyi">keleyi</div>  
<div id="myslider">myslider</div>  
<div id="zonemenu">zonemenu</div>  
<script src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js"></script>  
<script src="http://www.kevin-ying.com/jq/jquery.hovertreescroll.js"></script>  
<script>  
function scroll(id) {  
$("#" + id).HoverTreeScroll(1000);  
}  
</script>  
</body>  
</html>

本帖被以下淘专辑推荐:

  • · 常用|主题: 22, 订阅: 0
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖1
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-4-27 09:39 , Processed in 0.093600 second(s), 28 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表