温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

实现页内跳转定位到某个ID

发布时间:2020-08-05 22:15:57 来源:网络 阅读:1015 作者:pmlinjian 栏目:web开发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jq.js"></script>

<script type="text/javascript">

function goTotop(obj){

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

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

}

</script>

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

<style type="text/css">

#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('xcshow')"><b>测试二</a></li>

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

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

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

  </ul>

 </div>

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

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

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

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

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

</div>


<div >ddd</div>

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

<!--

相关资料

http://www.dbpoo.com/js-anchor-name-id/

http://blog.csdn.net/huaishuming/article/details/8951504

-->

</body>

</html>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI