网站点击导航栏标题，对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效
时间：2014-05-09 21:09:00
收藏：0
阅读：466
之前看w3cshool上面，看到了a,name配合可以设置锚点，很多看书的网站上都用到，可以根据点击对应的目录章节，自动跳到具体的文字内容。
不过用锚点做的特效感觉很粗糙，不够平滑，总是一下子就跳到下面去了，没有给浏览者一种平滑的感觉。所以自己就计划着能不能做一种类似的比较平滑的效果呢？
当然是可以的。这篇博客中的特效要用到如下的函数和属性，大家没见过或者见过用过已经忘了的，可以到w3cshool上恶补下：
eq(index)：相当于数组吧，可以根据index索引到具体的对象
scrollTo()：可以把内容滚动到指定的坐标
scroll()：触发scroll事件
scrollTop()：设置或返回匹配元素的滚动条的垂直位置
offset():返回或设置元素相对于文档的偏移
下面开始贴出代码了：(一共三种，一种是我的，另外是我两个朋友的)
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.js"></script>
<style type="text/css">
.rows{
width: 100%;
height:400px;
}
.totop{
position: fixed;
bottom: 20px;
right: 10px;
z-index: 9999;
}
</style>
</head>
<body>
<div style="height:180px; margin:0 auto;">
<ul id="nav">
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0)">第1个</a>
</li>
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(1)">第2个</a>
</li>
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(2)">第3个</a>
</li>
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(3)">第4个</a>
</li>
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(4)">第5个</a>
</li>
</ul><
</div>
<div class="rows" style="background-color:#FF0">
汤姆克鲁斯
</div>
<div class="rows" style="background-color:#F0F">
汤姆克鲁斯
</div>
<div class="rows" style="background-color:#F00">
汤姆克鲁斯
</div>
<div class="rows" style="background-color:#0F0">
汤姆克鲁斯
</div>
<div class="rows" style="background-color:#00F">
汤姆克鲁斯
</div>
<a class="totop" onClick="scroll_Top()" href="javascript:void(0)"><img src="images/totopbg.png"/></a>
<script type="text/javascript">
function scorll_T(e){
height=$(".rows:eq("+e+")").offset().top;
$("body").animate({scrollTop:height},500);
}
function scroll_Top()//这边是点击图片回到页面顶部的js
{
$("body").animate({scrollTop:0},500);
}
</script>
</body>
</html>
以上是我优化的我朋友的代码。
我使用offset直接取到指定元素相对于文档的偏移。
而我朋友的思路是取到匹配元素之前的元素的高度作为偏移量，把这个作为相对于文档的偏移量
两种方法都是可以的，看个人爱好了。
上面代码里面也有点击图片回到顶部的特效，不是很复杂，我这里就不详细说了。
下面贴出我朋友的代码：
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.js"></script>
<style type="text/css">
.rows{
background-color: red;
width: 100%;
}
.rows .content{
border-top: 1px solid #fff;
width: 980px;
height: 400px;
background-color: blue;
}
.totop{
position: fixed;
bottom: 20px;
right: 10px;
z-index: 9999;
}
</style>
</head>
<body>
<div>
<ul id="nav">
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0,0)">第1个</a>
</li><!--item pngbg-->
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0,1)">第2个</a>
</li><!--item pngbg-->
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0,2)">第3个</a>
</li><!--item pngbg-->
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0,3)">第4个</a>
</li><!--item pngbg-->
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0,4)">第5个</a>
</li><!--item pngbg-->
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0,5)">第6个</a>
</li><!--item pngbg-->
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0,6)">第7个</a>
</li><!--item pngbg-->
<li class="item pngbg">
<a href="javascript:void(0);" onClick="scorll_T(0,7)">第8个</a>
</li>
<a href="javascript:void(0);" onClick="scorll_T(0,8)">第9个</a>
</ul><!--nav-->
</div>
<div class="rows">
<div class="content">第1个</div>
</div>
<div class="rows">
<div class="content">第2个</div>
</div>
<div class="rows">
<div class="content">第3个</div>
</div>
<div class="rows">
<div class="content">第4个</div>
</div>
<div class="rows">
<div class="content">第5个</div>
</div>
<div class="rows">
<div class="content">第6个</div>
</div>
<div class="rows">
<div class="content">第7个</div>
</div>
<div class="rows">
<div class="content">第8个</div>
</div>
<div class="rows">
<div class="content">第9个</div>
</div>
<a class="totop" onClick="window.scrollTo(0,0);return false"><img src="images/totopbg.png"/></a>
<script type="text/javascript">
var $item = jQuery(‘#nav .item‘);
$item.hover(
function(){
jQuery(this).addClass("hover");
},function(){
jQuery(this).removeClass("hover");
}
);
function scorll_T(b,e){
var $height = 180;
for(var i=b;i<e;i++){
$height += $(".rows:eq("+i+")").height();
}
jQuery(‘body,html‘).animate({scrollTop:$height},300);
}
</script>
</body>
</html>最后是另外一个朋友的写法：
他用了除jquery.js库之外的另外一个jquery.scrollTo-min.js的库，顿时高大上了，平滑的效果更加好。
由于他也顺带做了导航栏色块的移动的特效，所以可能在浏览器上有类似闪屏的效果，大家自行忽略或者删掉那段代码即可。
注意引用jquery.scrollTo-min.js的库之后，scrollTo()的意义就改变了，准确的说被重载了。第一个参数是上移多少像素，第二个是动画时间。
下面是他的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动导航</title>
<style>
body, html, div, ul, li, a {
margin: 0;
padding: 0;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
font-style: italic;
}
#top {
width: 100%;
position: fixed;
top: 0px;
padding: 0;
}
.menu {
margin: 0 auto;
width: 900px;
position: relative;
border: 0px solid #000;
height: 120px;
background-color:#000;
}
.menu ul {
border: 0px solid #F00;
height: 60px;
padding-top: 30px;
}
.menu li {
float: left;
width: 80px;
list-style: none;
padding: 0 20px;
text-align: center;
height: 60px;
line-height: 60px;
;
border: 0px solid #FFF;
}
.menu a {
text-decoration: none;
color: #CCC;
}
.menu a:hover, .menu li:hover a {
color: #0CF;
}
.back {
height: 3px;
background-color: #0CF;
position: absolute;
bottom: 0px;
left: 0px;
width: 120px;
}
</style>
<script src="js/jquery.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script>
function change(){//色块的特效
var h=$(window).scrollTop();
w_left=0.231*h;
$(".back").stop(true,true).animate({left:w_left,width:"120px"}, "fast");
}
$(document).ready(function(e) {
/* $(".menu ul li a").mouseenter(function(){
var parent=$(this).parent();
left=parent.position().left;
$(".back").stop(true,true).animate({left:left,width:"120px"}, "fast");
}) */
$(".menu ul").mouseleave(function(){change();});
$(window).scroll(function(){change();});
$(".home").click(function(){
$.scrollTo(0,500);
});
$(".page").click(function(){
$.scrollTo(518,800);
});
$(".pic").click(function(){
$.scrollTo(518*2,1000);
});
$(".pro").click(function(){
$.scrollTo(518*3,1200);
});
$(".con").click(function(){
$.scrollTo(518*4,1500);
});
});
</script>
</head>
<body>
<div id="top">
<div class="menu">
<ul>
<li><a class="home" href="#">Home</a></li>
<li><a class="page" href="#">Page</a></li>
<li><a class="pic" href="#">Picture</a></li>
<li><a class="pro" href="#">Product</a></li>
<li><a class="con" href="#">Contact</a></li>
</ul>
<div class="back"></div>
</div>
</div>
<div style="width:900px; height:518px; background-color:#0F0; margin:120px auto 0 auto;"></div>
<div style="width:900px; height:518px; background-color:#999; margin:0 auto;"></div>
<div style="width:900px; height:518px; background-color:#F00; margin:0 auto;"></div>
<div style="width:900px; height:518px; background-color:#FF0; margin:0 auto;"></div>
<div style="width:900px; height:518px; background-color:#F0F; margin:0 auto;"></div>
</body>
</html>如果大家有更加简单的方法，欢迎交流讨论下。
评论（0）