点击链接自动定位到网页某个具体位置和网站右侧导航介绍jquery
页面点击链接后，自动定位到网页某个具体位置
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
页面点击链接后，自动定位到网页某个具体位置
<!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>
<!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>
我要评论