Summary of development--back to top

Source: Internet
Author: User

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" >
<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 (function () {
$ ("body,html"). Stop (true, false) . Animate ({
}, +);
return false;
<style type= "text/css";
Body {

. gototop {
Background: #031523;
Color: #fff;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;

A:hover.gototop {
Background: #fff;
Color: #000;

<br/> 132
<br/> 132
<br/> 132
<br/> 132

<a href= "javascript (0);" class= "Gototop" id= "Gototop" style= "display:inline;" > Shang </a>


Summary of development--back to top

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.