页面点击链接自动定位到网页某个具体位置和网站右侧导航的介绍

页面点击链接后,自动定位到网页某个具体位置

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title> 
</head>
<body>
<a href="#help">帮助</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
......
......
<a name="help">跳到这里来</a>
</body>
</html>

下面再给大家介绍一个网页右侧导航,当页面划到相应的地方右侧导航栏慢慢显示出来!

亲们如果没有图片可以把这张图片截图拿去用哦!

如下图:


页面点击链接自动定位到网页某个具体位置和网站右侧导航的介绍


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#pic{ background:url(http://127.0.0.1/qrj/img_14.png) no-repeat center top;height:198px; padding-top:84px; width:98px; position:fixed; right:-98px;top:100px;}
.a04{display:block; height:44px;}
.a05{display:block; height:32px;}
.a06{display:block; height:32px;}
.a07{display:block; height:32px;}
</style>
<title>test</title> 
</head>
<body>
试试看吧!
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="haha">哈哈</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="nihao">你好</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="gaoxing">高兴</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="ok">OK</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
......
......
<div id="pic">
<a href="#haha" class="a04"></a><a href="#nihao" class="a05"></a><a href="#gaoxing" class="a06"></a><a href="#ok" class="a07"></a>
</div>
</body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
	var flag=true;
    $(window).scroll(function(){		     
	         if($(window).scrollTop() >=400 ){
				 if(flag==true){
					 flag=false;	
					 $("#pic").animate({‘right‘:‘0‘},500);					 
				  }					  		 				 
			 }else{					     				 
			     if(flag==false){					
					 flag=true; 	
					 $("#pic").animate({‘right‘:‘-98px‘},500);									 
				 }		 			  
			 }
	})
})
</script>
</html>

页面点击链接自动定位到网页某个具体位置和网站右侧导航的介绍

上一篇:web服务器并发压力测试


下一篇:利用jquery判断点是否在椭圆内