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

深碍√TFBOYSˉ_ 2022-08-27 04:51 59阅读 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>
                        <li class="item pngbg">
                        	<a href="javascript:void(0);" onClick="scorll_T(0,1)">第2个</a>
                        </li>
                        <li class="item pngbg">
                        	<a href="javascript:void(0);" onClick="scorll_T(0,2)">第3个</a>
                        </li>
                        <li class="item pngbg">
                        	<a href="javascript:void(0);" onClick="scorll_T(0,3)">第4个</a>
                        </li>
                        <li class="item pngbg">
                        	<a href="javascript:void(0);" onClick="scorll_T(0,4)">第5个</a>
                        </li>
                        <li class="item pngbg">
                        	<a href="javascript:void(0);" onClick="scorll_T(0,5)">第6个</a>
                        </li>
                        <li class="item pngbg">
                        	<a href="javascript:void(0);" onClick="scorll_T(0,6)">第7个</a>
                        </li>
                        <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>
    
    	</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>

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