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

最新推荐文章于 2024-04-20 11:40:45 发布

风火程序员

最新推荐文章于 2024-04-20 11:40:45 发布

阅读量8.8k

点赞数 1

分类专栏： javascript css 文章标签：链接跳转到相应位置

本文链接：https://blog.csdn.net/phpfenghuo/article/details/19082667

版权

javascript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

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

<!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>