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

最新推荐文章于 2023-06-13 17:36:13 发布

BigLazyET

最新推荐文章于 2023-06-13 17:36:13 发布

阅读量3.1k

点赞数

文章标签： js jquery 网站点击导航栏标题对应的元素平滑上移点击图片或按钮回到页面顶部的特效设置锚点跳转

本文链接：https://blog.csdn.net/u010792238/article/details/25406213

版权

网页前台特效专栏收录该内容

6 篇文章 0 订阅

订阅专栏

之前看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>

如果大家有更加简单的方法，欢迎交流讨论下。

BigLazyET

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网站点击导航栏标题，对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面，看到了a,name配合可以设置锚点，很多看书的网站上都用到，可以根据点击对应的目录章节，自动跳到具体的文字内容。不过用锚点做的特效感觉很粗糙，不够平滑，总是一下子就跳到下面去了，没有给浏览者一种平滑的感觉。所以自己就计划着能不能做一种类似的比较平滑的效果呢？当然是可以的。这篇博客中的特效要用到如下的函数和属性，大家没见过或者见过用过已经忘了的，可以到w3csho
复制链接

扫一扫