Html button to top of page. Smooth "Back to Top" button in jQuery

A method of smooth movement (scrolling) along links on a website page was considered. A private version of this scrolling is a return to the top of the page button.

Typically, the return to the top button is placed in the lower right corner of the screen and made fixed so that you can go back at any time. To do this, just set the position of the button as follows: CSS rules:
position:fixed; /*Button location on the page: bottom right with 10px indentation*/
top:auto;
bottom:10px;
left:auto;
right:10px;

For particularly lazy comrades, it is convenient to use Unicode symbols instead of a button image, designing them using CSS rules. How to choose a suitable icon symbol is described in the article “Unicode Symbols - Useful Icons for a Website”. For example, using the icon with the code ⇑, you can get the following button:

The button's design is done using the following CSS rules:
border-radius:5px;
background-color:#ddd;
padding:8px 20px;
font-size:24px;
color:#333;
text-align:center;

The described method has one drawback: the return to top button is constantly displayed. To make it appear only when moving down the page, you can use a slightly modified script - the jQuery liScrollToTop plugin.

The operation of this plugin is demonstrated by the arrow at the bottom right of this page. In addition to the button appearing only when scrolling, animation has been added to the plugin - smooth appearance and the button disappears.

As usual, when installing jQuery plugins first we will create it on the website new folder, calling it, of course, scrolltotop . Then download the archive and unpack it into the created folder. We will receive two scripts jquery-1.8.3.min.js, jquery.liScrollToTop.js and a style sheet liScrollToTop.css.

Next, in the page title inside the tag... we insert the following lines, which indicate the path to the new files and a small javascript to initialize the plugin:




$(function())(
$(".scrollUp").liScrollToTop();
});

We place the picture of the return button anywhere on the page (it’s more convenient at the end) in the DIV tag: