- Using the learning jquery features, produced this effect, the effect of the return to the bottom, back to the top, the site message navigation three functions, Web site message link You can modify as any of the links you want to navigate, this can be used flexibly. The highlights of this effect are compatibility and animation effects, as well as beautifully designed arrows.
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Hebei Gift Company</title><Scripttype= "Text/javascript"src= "/ajaxjs/jquery-1.4.2.min.js"></Script><styletype= "Text/css">Body{margin:0;padding:0;font-size:12px;}#main{width:910px;margin:0 Auto;Height:2000px;}. Go{width:47px;Height:106px;position:fixed;_position:Absolute;_top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (this.currentstyle.margintop,10) | | -(parseint (this.currentstyle.marginbottom,10) | | 0 ))); Right:12px;Bottom:25%;Background-image:URL ("/jscss/demoimg/201208/tobg.png");background-repeat:no-repeat;}. Go a{background:URL (/jscss/demoimg/201208/a.png) no-repeat;Display:Block;text-indent:999em;width:37px;margin:5px;Border:0;Overflow:Hidden;float: Left;cursor:Pointer;}. Go. Top{background-position:0 0px;Height:22px}. Go. Feedback{background-position:0-22px;Height:32px}. Go. Bottom{background-position:0-55px;Height:22px}. Go. Top:hover{background-position:-38px-0px}. Go. Feedback:hover{background-position:-38px-22px}. Go. Bottom:hover{background-position:-38px-55px}</style><Scripttype= "Text/javascript"> $(function () { $(". Top"). Click (//defines the animation that returns the top click scrolling up function () { $('Html,body'). Animate ({scrolltop:0 }, the); }); $(". Bottom"). Click (//defines the animation that returns the top click scrolling up function () { $('Html,body'). Animate ({scrollTop:document.body.clientHeight}, the); }); })</Script></Head><Body><DivID= "Main"><Divclass= "Go"> <atitle= "Back to Top"class= "Top"></a> <atitle= "If you have any comments, please give us feedback!" "class= "Feedback"href= "/guestbook/"Target= "_blank"></a> <atitle= "Back to bottom"class= "Bottom" ></a></Div></Div></Body></HTML>