首页 > 代码库 > 网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看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=http://www.mamicode.com/"js/jquery.min.js" language="javascript" type="text/javascript"></script>>
如果大家有更加简单的方法,欢迎交流讨论下。