| The code is as follows |
Copy Code |
| <title>jquery Return Top Effects </title>
<body>
<style type= "Text/css" >
/* Return to Top * *
#roll_top {position:relative; margin-bottom:1px;cursor:pointer;height:60px;width:60px;display:block;background:# DDD;}
#roll_top: hover {background: #666;}
#roll {width:60px;position:fixed;right:30px;bottom:50px;
_position:absolute;
_margin-top:300px;
_bottom:auto;
_top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-40-this.offsetheight-(parseint (this.currentstyle.margintop,10) | | 0)-(parseint (this.currentstyle.marginbottom,10) | | 0));
}
</style>
<p align= "Right" >
</p>
<div id= "Roll" > </i> <a title= "Back to Top" id= "Roll_top" javascript:; "href=" style=; "></a> </div>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
JQuery (function () {
/* Return to the top and find customer service * *
var jq=jquery;
JQ (' #roll_top '). Hide ();
JQ (window). Scroll (function () {
if (JQ (window). scrolltop () > 0) {
JQ (' #roll_top '). FadeIn (400);//When the sliding bar slides down, the time when the button is fading
} else {
JQ (' #roll_top '). fadeout (200);//When the page returns to the top of the first screen, the time when the button fades
}
});
JQ (' #roll_top '). Click (function () {
JQ (' Html,body '). Animate ({
ScrollTop: ' 0px '
}, 200);//Returns the time spent at the top
});
});
</script>
|
Instance
"Back to top" effect of imitation sina net
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Imitation sina net "return top" effect </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<style type= "Text/css" >
. backtotop {
Display:none;
width:18px;
line-height:1.2;
padding:5px 0;
Background-color: #000;
Color: #fff;
font-size:12px;
Text-align:center;
position:fixed;
_position:absolute;
right:10px;
bottom:100px;
_bottom: "Auto";
Cursor:pointer;
Opacity:. 6;
Filter:alpha (opacity=60);
}
</style>
<script type= "Text/javascript" src= "Http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script >
<body>
<p> if the bottom left corner prompts for error in preview, <font color=red> Please refresh this page </font> you can see the effect. </p>
<p> Drag the scroll bar to the bottom of the page to display the "Back Top" button. </p>
<p> more code please visit: <a href= "http://www.111cn.net/" target= "_blank" > Web page Making Tutorials </a></p>
<p></p>
<div style= "height:2000px;" ></div>
<script type= "Text/javascript" >
(function () {
var $backToTopTxt = "Back to top", $backToTopEle = $ (' <div class= ' backtotop ' ></div> '). Appendto ($ ("body")
. Text ($BACKTOTOPTXT). attr ("title", $backToTopTxt). Click (function () {
$ ("HTML, Body"). Animate ({scrolltop:0}, 120);
}), $backToTopFun = function () {
var st = $ (document). ScrollTop (), Winh = $ (window). Height ();
(St > 0)? $backToTopEle. Show (): $backToTopEle. Hide ();
Positioning under the IE6
if (!window. XMLHttpRequest) {
$backToTopEle. CSS ("Top", St + winh-166);
}
};
$ (window). Bind ("scroll", $backToTopFun);
$ (function () {$backToTopFun ();});
})();
</script>
</body>
|
Instance
The effect of the rally back to the bottom, back to the top, website message navigation three functions, site message links You can modify to any one you want to navigate the link, this can be flexible use of
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Special Effects Factory </title>
<script type= "Text/javascript" src= "/ajaxjs/jquery-1.4.2.min.js" ></script>
<style type= "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>
<script type= "Text/javascript" >
$ (function () { $ (". Top"). Click (//definition to return to the topmost scroll animation
function () {
$ (' HTML, Body '). Animate ({scrolltop:0}, 700);
});
$ (". Bottom"). Click (//definition to return to the top button to scroll up the animation
function () {
$ (' HTML, Body '). Animate ({scrollTop:document.body.clientHeight}, 700);
});
})
</script>
<body>
<div id= "main"
<div class= "Go"
<a title= "Back to Top" class= "Tops" >< /a>
<a title= "If you have comments, please feedback to us!" "Class=" Feedback href= "/guestbook/" target= "_blank" ></A>
<a title= "Back to Bottom" class= "Bottom" > </a>
</div>
</div>
</body>
|
