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

分类栏目:destoon实战

161


<!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="http://www.dtmuban.com/course/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> <div> <ul> <li><a href="javascript:void(0)"goTotop('xwbg')">跳转测试一</a></li> <li><a href="javascript:void(0)"goTotop('xcshow')"><b>测试二</a></li> <li><a href="javascript:void(0)"goTotop('wdy')">跳转测试三</a></li> <li><a href="javascript:void(0)"goTotop('mv')"><跳转测试四</a></li> <li><a href="javascript:void(0)"goTotop('dsy')">跳转测试五</a></li> </ul> </div> <div><h3>跳转测试一</h3></div> <div ><h3>跳转测试二</h3></div> <div><h3>跳转测试三</h3></div> <div><h3>跳转测试四</h3></div> <div><h3>跳转测试五</h3></div> </div> <div>ddd</div> <a href="javascript:void(0)"goTotop('xcshow')">跳转测试一</a> </body> </html>