jquery Anchor Point Drive draw Jump effect

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><meta charset=" Utf-8 "><pead><title>jquery anchor point Drive painting jump effect </title><script src=" http/ Files.cnblogs.com/files/caidupingblogs/jquery-1.6.2.min.js "type=" Text/javascript "></script><style >.gray {-webkit-filter:grayscale (100%); -moz-filter:grayscale (100%); -ms-filter:grayscale (100%); -o-filter:grayscale (100%); Filter:grayscale (100%); Filter:gray;} /* Reset */body, div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, p, form, fieldset, legend, Input, button, textarea, th , TD {Margin:0; padding:0;} Table {border-collapse:collapse; border-spacing:0;} FieldSet, img {border:0;} Ul,li {list-style:none;} Body {background: #0A0A0A; Color: #40E0D0;}. row:after {clear:both; Content: ' \0020 '; Display:block; height:0;}. row {zoom:1;} /* link color */a,button{outline:none; hide-focus:exprEssion (this.hidefocus=true); }a{color: #FFFFFF; text-decoration:none;} A:hover{color: #FFFFFF; text-decoration:underline;}. fst{font-family: "\5b8b\4f53";} h1,h2,h3,h4,h5,h6{font-family:\5fae\8f6f\96c5\9ed1; font-size:16px;} /* Bottom reset */.row{width:1000px; margin:0 Auto;} /* Template header, all thematic pages common */.index_nav{width:575px; height:70px; margin:0 auto; padding-left:5px; background: #fff;}. Index_nav li{width:115px; height:70px; float:left;}. Index_nav Li A{display:block; float:left; width:110px;height:65px; Background:url (http://images.cnblogs.com/cnblogs _com/caidupingblogs/773011/o_5-121106095005-50.gif) 0 0 no-repeat; Text-align:center; Color: #00000;}. Index_nav Li a i{display:block; padding-top:12px; height:22px; line-height:22px;}. Index_nav Li a strong{font-family:arial, Helvetica, Sans-serif; font-weight:bold; font-size:24px; display:block; heigh t:30px; line-height:20px;}. Index_nav li a:hover{background-position:0 -50px; color: #fff; text-decoration:none;}. h15{height:15pX Overflow:hidden;} H2{font-size:24px;text-align:center;color: #FFFFFF; font-weight:bold;}. MainPage p{width:650px; margin:0 auto; color: #fff; font-size:16px; padding:50px 0 50px;} /*.mainpage p{width:650px; margin:0 auto; color: #fff; font-size:16px; padding:100px 0 100px;}. Mainpage1{background: #00F5FF;}. Mainpage2{background: #be0000;}. Mainpage3{background: #2E8B57;}. Mainpage4{background: #1874CD;}. Mainpage5{background: #B03060;} <div class= "H50" ></div><div class= "Row" id= "main" > <p id= "index_1" > This is the first active page </p> < Div class= "mainpage mainpage1" ></div></div><div class= "h15" ></div><div class= "Row" > <p id= "Index_2" > This is the second activity page </p> <div class= "mainpage mainpage2" ></div></div>< Div class= "h15" ></div><div class= "Row" > <p id= "Index_3" > This is the third active page </p><div class= " MainPage mainpage3 "></div></div><div class=" h15 "></div><div class="Row" > <p id= "Index_4" > This is the Fourth activity page </p> <div class= "mainpage mainpage4" ></div></div> <div class= "h15" ></div><div class= "Row" > <p id= "index_5" > This is the Fifth activity page </p> <div class= "MainPage mainpage5" ></div></div>*/*html{background-image:url (About:blank); background-attachment : fixed;} #tbox {width:30px; height:240px; float:right; position:fixed; Display:none;_position:absolute;_bottom:auto;_top: Expression (eval (document.documentelement.scrolltop+document.documentelement.clientheight-this.offsetheight-( parseint (this.currentstyle.margintop,10) | | 0)-(parseint (this.currentstyle.marginbottom,10) | | 0))); _margin-bottom:50px;} /* This can only change the width and height of the other do not modify, need to scroll the content should be placed in this div */.taoba{display:block;width:30px;height:30px;margin-bottom:4px;text-align: Center;color: #fff; Line-height:30px;overflow:hidden;cursor:pointer;background-color: #c2c2c2; background-position : Right;}. Taoba:hover{text-decoration:none;color: #000000; Background-color: #FFFFFF;} #gotop {display:block; width:50px; height:120px; text-indent:-999px; overflow:hidden; color: #fff; Background:url (http ://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_5-120601155s6-50.png) No-repeat; Position:absolute; Display:none; Cursor:pointer} #gotop: hover{background-position:0 -50px;} </style><script type= "Text/javascript" > JQuery (document). Ready (function ($) {$ (". Index_nav li a"). Click ( function (event) {var index=this.title var id= ' # ' + ' index_ ' +index $ ("Html,body"). Animate ({scrolltop: $ (ID).) o Ffset (). Top}, 1000); }); $ (". Taoba"). Click (Function (event) {var index=this.title var id= ' # ' + ' index_ ' +index $ ("Html,body"). Animate ({ ScrollTop: $ (ID). Offset (). Top}, 1000); }); function A (x, y) {L = $ (' #main '). Offset (). Left; W = $ (' #main '). width (); $ (' #tbox '). CSS (' Left ', (l + w + x) + ' px '); $ (' #tbox '). CSS (' bottom ', y + ' px ');} Gets the #tbox div from the bottom of the browser and the distance function to the right of the page content area #main The visual width of the page (function () {$ (window). Scroll (function () { T = $ (document). ScrollTop (); if (t>500) {$ (' #tbox '). Show (); }else{$ (' #tbox '). Hide (); } if (T >) {$ (' #gotop '). FadeIn (' slow '); }else{$ (' #gotop '). FadeOut (' slow '); }}) A (10,100);//#tbox的div距浏览器底部和页面内容区域右侧的距离 $ (' #gotop '). Click (function () {$ (' body,html '). Animate ({ SCROLLTOP:0}, 500);//Click Back to the top of the time Ms return false; })}); }); </script></pead><body><div class= "Indexnav_wrap" > <ul class= "Index_nav" > <li ><a href= "javascript:void (0)" title= "1" ><i> events </i><strong>1</strong></a> </li> <li><a href= "javascript:void (0)" title= "2" ><i> activity </i><strong>2</ strong></a></li> <li><a href= "javascript:void (0)" title= "3" ><i> events </i>< strong>3</strong></a></li> <li><a href= "javascript:void (0)" title= "4" ><i> Event &Lt;/i><strong>4</strong></a></li> <li><a href= "javascript:void (0)" title= "5" ><i> Events </i><strong>5</strong></a></li> </ul></div><div class= "H50" ></div><div class= "Row" id= "main" > <p id= "index_1" > This is the first active page </p> <div class= "MainPage mainpage1" ></img></div></div><div class=" h15 "></div> <div class= "Row" > <p id= "Index_2" > This is the second active page </p> <div class= "mainpage mainpage2" >< /img></div></div><div class= "h15" ></div><div class= "Row" > <p id= "Index_3" > This is the third activity page </p><div class= "mainpage mainpage3" ></img></div></div ><div class= "h15" ></div><div class= "Row" > <p id= "Index_4" > This is the Fourth activity page </p> <div class= "MainPage mainpage4" ></img></div></div><div class=" h15 "></div> <div class= "Row" > <p id= "index_5" > This is the Fifth activity page </p> <div class= "mainpage mainpage5" >< /img></div></div><div id= "Tbox" ><!--side border--<a class= "Taoba" href= "javascript:void (0) "title=" 1 ">1</a> <a class=" Taoba "href=" javascript:void (0) "title=" 2 ">2</a> <a class=" Taoba "href=" javascript:void (0) "title=" 3 ">3</a> <a class=" Taoba "href=" JavascRipt:void (0) "title=" 4 ">4</a> <a class=" Taoba "href=" javascript:void (0) "title=" 5 ">5</a> <a Id= "Gotop" href= "javascript:void (0)" title= "Top" > Top </a> </div></div></body>

jquery Anchor Point Drive draw Jump effect