You can smoothly scroll to the specified position of the page without using an anchor.
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Meta content = "text/html; charset = UTF-8"/>
<Title> ScrollTo: Scroll smoothly to the specified position on 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; color: # 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>
</Head>
<Body>
<Div id = "main">
<H2 class = "top_title"> ScrollTo: Scroll smoothly to the specified position on the page <Ul class = "nav">
<Li> <a href = "#" class = "nav_pro"> product presentation </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">
<H3> product display </Div>
<Div id = "news" class = "box">
<H3> News Center </Div>
<Div id = "ser" class = "box">
<H3> service support </Div>
<Div id = "con" class = "box">
<H3> Contact Us </Div>
<Div id = "job" class = "box" style = "height: 680px">
<H3> talent recruitment </Div>
</Div>
</Body>
</Html>
JS Plugin: scroll
