js示例代码实现页内跳转定位到某个ID_H5之家 - 中国HTML5教程资源分享第一站

js示例代码实现页内跳转定位到某个ID 2013-09-27 21:08:52 作者：eagle 来源：PHP114 浏览次数：0 网友评论 0 条

js示例代码实现页内跳转定位到某个ID：直接复制此文件到保存成.html格式，浏览器打开，点击导航跳转测试二等会直接跳转到下面对应的栏目上...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

function goTotop(obj){

var _targetTop = $('#'+obj).offset().top;//获取位置

jQuery("html,body").animate({scrollTop:_targetTop},300);//跳转

}

</script>

<title>实现页内跳转定位到某个ID_</title>

#content {margin:0 auto;width:1000px;}

#content .box01_con {height:38px;margin:15px 0;}

#content .box01_con .menu {float:left;margin-top:8px;overflow:hidden;}

#content .box01_con .menu li {float:left;margin-right:28px;list-style-type:none;}

#content .box01_con .menu li a {color:#282828;display:block;font-size:14px;height:16px;line-height:16px;padding-left:26px;}

.box04_con {margin-top:0px;height:300px;border-top:5px solid #ccc;font-weight:bold;}

</style>

</head>

<body>

<div id="content">
<div class="box01_con">
<ul class="menu">
<li><a href="javascript:void(0)" onclick="goTotop('xwbg')">跳转测试一</a></li>

<li><a href="javascript:void(0)" onclick="goTotop('wdy')">跳转测试三</a></li>

<li><a href="javascript:void(0)" onclick="goTotop('dsy')">跳转测试五</a></li>

</ul>

</div>

<div class="box04_con" id="xwbg"><h3>跳转测试一</h3></div>

<div class="box04_con" id="xcshow" ><h3>跳转测试二</h3></div>

<div class="box04_con" id="wdy"><h3>跳转测试三</h3></div>

<div class="box04_con" id="mv"><h3>跳转测试四</h3></div>

<div class="box04_con" id="dsy"><h3>跳转测试五</h3></div>

</div>

</body>

</html>

责任编辑：eagle

关键词：JSJquey