JQuery's return to the top function is suitable for browsers that do not support js _ jquery

The a tag points to the top of the anametop, which can prevent an anametop anchor on the top of the anchor. In this way, when the browser does not support js, the result of returning to the top can be achieved. Many websites have the result of returning to the top, this article describes how to use jquery to return the top button.

First, add the following html elements to the top:

Back to Top

The a tag points to the top of the anchor to prevent an anchor on the top. In this way, the browser can return the result of the top when js is not supported.

To display the image at the top of the returned result on the right side, you also need some css styles, as shown below:

/* ReturnTop */p # back-to-top {position: fixed; display: none; bottom: 100px; right: 80px ;} p # back-to-top a {text-align: center; text-decoration: none; color: # d1d1d1; display: block; width: 64px; /* use the transition attribute in CSS3 to add the gradient effect to the text in the jump link */-moz-transition: color 1 s;-webkit-transition: color 1 s;-o-transition: color 1 s;} p # back-to-top a: hover {color: #979797;} p # back-to-top a span {background: transparent url (/sta Tic/imgs/sprite.png? (1202) no-repeat-25px-290px; border-radius: 6px; display: block; height: 64px; width: 56px; margin-bottom: 5px; /* use the transition attribute in CSS3 to add the gradient effect to the label background color */-moz-transition: background 1 s;-webkit-transition: background 1 s;-o-transition: background 1 s;} # back-to-top a: hover span {background: transparent url (/static/imgs/sprite.png? (1202) no-repeat-25px-290px ;}

The background image in the above style is a Sprite image. The following two independent back-to-top images are provided for your convenience:

With html and style, we also need to use js to control the return button on the top. When the page is scrolling, the return button will gradually fade away.