页面点击链接后,自动定位到网页某个具体位置
<!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>