随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

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

平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。

效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htm

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">柯乐义</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://keleyi.com/a/bjae/jrdfulnx.htm">原文</a> <a href="http://keleyi.com">柯乐义</a> <a href="http://hovertree.com">HoverTree</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a>  
</div>  
<div id="keleyi">keleyi</div>  
<div id="myslider">myslider</div>  
<div id="zonemenu">zonemenu</div>  
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>  
<script src="http://keleyi.com/keleyi/phtml/jqtexiao/37/jquery.hovertreescroll.js"></script>  
<script>  
function scroll(id) {  
$("#" + id).HoverTreeScroll(1000);  
}  
</script>  
</body>  
</html>