Just read the article found a common function module, this module is to return to the top, this is often used in various sites, can greatly improve the friendliness, enhance the user experience, I also studied this back to the top of the JS code, or relatively simple, I do not make comments, As long as you learn a little JS can read how to write, now put the code, for everyone to learn the reference and excerpt! All the code I've provided has been tested and determined to be published.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script src= "Jquery-1.8.2.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script type= "Text/javascript" >
Back to Top
$ (function () {
The code here is to determine whether the current height of the window is greater than 0, then judge, hide and show
var gototop = $ ("#gototop");
$ (window). Scroll (function () {
if ($ (window). scrolltop () > 0) {
Gototop.fadein (300);
} else {
Gototop.fadeout (300);
}
});
The code here is to return the action that was executed after the top was clicked, where. Stop this piece, the first true means stop all current operations, and if the second one is ture, it is executed immediately, but it is false to hit the door.
//followed by a animate animation operation, the total time to execute is 0.5 seconds, the other should be able to understand the
Gototop.click (function () {
$ ("body,html"). Stop (true, false) . Animate ({
scrolltop:0
}, +);
return false;
});
});
</script>
<style type= "text/css";
Body {
font-size:50px;
}
. gototop {
position:fixed;
right:7px;
bottom:10px;
Display:block;
font-size:18px;
width:30px;
height:30px;
Background: #031523;
Color: #fff;
Text-align:center;
padding-top:5px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
Display:none;
}
A:hover.gototop {
Text-decoration:none;
Background: #fff;
Color: #000;
}
</style>
<body>
132
<br/> 132
<br/> 132
<br/> 132
<br/> 132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>
<a href= "javascript (0);" class= "Gototop" id= "Gototop" style= "display:inline;" > Shang </a>
</body>
Summary of development--back to top
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
