JQuery returns to the top and jquery returns to the top.

JQuery returns to the top and jquery returns to the top.

When the content of a page is relatively long, there is usually a "Back to Top" button at a fixed position in the lower right corner of the page. After clicking it, the page's scroll bar gradually rolls back to the top, this article describes an implementation process.
First, a button is required.

<Button id = "btn_top" title = "Back to Top"> Back to Top </button>

Then locate this element to the bottom right corner. We use position: fixed. The button below adds some basic styles

#btn_top {    position: fixed;    bottom: 10px;    right: 10px;    display: none;}

At this time, this button is not displayed. We need to display the "Back to Top" button when the page's scroll bar is 50 pixels at the top, which is implemented through JQuery.

$(function () {    $(window).scroll(function () {        if ($(window).scrollTop() >= 50) {            $('#btn_top').fadeIn();        }        else {            $('#btn_top').fadeOut();        }    });});

Finally, we add a click event to the button "Back to Top" and use an animation to roll the scroll bar to the top.

$('#btn_top').click(function () {    $('html,body').animate({ scrollTop: 0 }, 500);});

Okay, you're done!