You can also smooth scroll to the specified position of the page without an anchor point
<! DOCTYPE html>
<meta content= "text/html; Charset=utf-8 "/>
<title>scrollto: Smooth scrolling to the specified location of the page </title>
<link rel= "stylesheet" type= text/css "href=". /css/main.css "/>
<style type= "Text/css" >
. nav{width:500px;margin:10px Auto;}
. Nav li{float:left; width:100px height:24px; line-height:24px}
. box{height:500px}
. box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}
. Clear{clear:both}
Html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li, Fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background: Transparent}
A{color: #007bc4/* #424242/* text-decoration:none;}
A:hover{text-decoration:underline}
Ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
body{height:100% font:12px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", Sans-serif; 51555C; Background: #162934 URL (.. /images/body_bg.gif) Repeat-x}
Img{border:none}
#main {width:910px; min-height:600px; margin:30px auto 0 auto; background: #fff;-moz-border-radius:12px;- khtml-border-radius:12px;-webkit-border-radius:12px; border-radius:12px;}
H2.top_title{margin:4px 20px; padding-top:15px; padding-left:20px padding-bottom:10px; border-bottom:1px Solid D3D3D3; font-size:18px; Color: #a84c10;}
</style>
<script type= "Text/javascript" src= "Http://jt.875.cn/js/jquery.js" ></script>
<script type= "Text/javascript" src= "Http://jt.875.cn/js/scrollto.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (". Nav_pro"). Click (function () {
$.scrollto (' #pro ', 500);
});
$ (". Nav_news"). Click (function () {
$.scrollto (' #news ', 800);
});
$ (". Nav_ser"). Click (function () {
$.scrollto (' #ser ', 1000);
});
$ (". Nav_con"). Click (function () {
$.scrollto (' #con ', 1200);
});
$ (". Nav_job"). Click (function () {
$.scrollto (' #job ', 1500);
});
});
</script>
<body>
<div id= "Main" >
<H2 class= "Top_title" >scrollto: Smooth scrolling to the specified location of the page <ul class= "NAV" >
<li><a href= "#" class= "Nav_pro" > Product show </a></li>
<li><a href= "#" class= "nav_news" > News Center </a></li>
<li><a href= "#" class= "Nav_ser" > Service Support </a></li>
<li><a href= "#" class= "Nav_con" > Contact Us </a></li>
<li><a href= "#" class= "Nav_job" > Talent Recruitment </a></li>
</ul>
<div class= "Clear" ></div>
<div id= "Pro" class= "box" >
</div>
<div id= "News" class= "box" >
</div>
<div id= "Ser" class= "box" >
</div>
<div id= "con" class= "box" >
</div>
<div id= "Job" class= "box" style= "height:680px" >
</div>
</div>
</body>
