Return the top button Based on Javascript, and return the top button by javascript.

Return the top button Based on Javascript, and return the top button by javascript.

If there are more than one page content, data will be displayed on different screens. If there are many screens, the data accessed by the user has reached the bottom of the page. At this time, it will take some time to return to the top. in this way, the user experience may be slightly inferior. therefore, for webpages with many page data, a "Back to Top" button is used to quickly jump to the top of the webpage.
Now we will implement such a function.

On this page, we will not write any data. We will directly add a tag a as the button to return to the top and give it a class name: top.

<A href = "#" class = "top"> top </a>

Then set the style sheet:

body {  height: 3000px;}.top {  position: absolute;  top: 120px;  display: inline-block;  width: 50px;  height: 50px;  line-height: 50px;  text-decoration: none;  text-align: center;  background-color: #666666;  color: #ffffff;  right: 10px;  transition: all 0.3s;   visibility: hidden;}.top:hover {  background-color: #ff3300;}

Here, the body is set to a height of 3000, mainly to make the page scroll. The buttons are usually placed on the right side of the page to the next position. Here we set them through position.

We also need to analyze whether the button is displayed when the webpage accessed by the user is at the top of the page. Therefore, visibility is used to control whether the button is displayed.

The interface is very simple. Let's take a look at the implementation of JS below.

First, this button is on the effect of the entire web page. Therefore, we need to set an onscroll event for the window to listen to the rolling event.

window.onscroll = function (e) {...}

In this event, we will control the upper and lower positions of the buttons at the top of the returned results and whether the buttons are displayed. First, we will control the upper and lower positions.

We must calculate the height of scrollTop and the height displayed on a single screen. when you enter the page, we place the button in the center right of the page by default. the calculation at this time is:

var n_half_height = window.screen.height / 2;

Assign this value to the top attribute of the button.

Then, if the position remains unchanged during user scrolling, the calculation at this time should be

Var n_stop = e.tar get. scrollingElement. scrollTop; // obtain the height of scrollTop var n_top = n_stop + n_half_height; // obtain the position

This is the event parameter in the onsroll object. Here I am using Google Chrome. other browsers are not tested. If compatibility is required, you can handle it.
The height of each scroll is calculated, so this should be placed in the onscroll event. Then, the value is assigned to the top attribute of the button.

Of course, do not forget that when scrollTop is 0, the button does not need to be displayed. when the value is greater than 0, the button must be displayed. as mentioned above, the visibility attribute is used for control. this completes the code.
Complete Javascript code

var ele_body = document.body;var ele_top = document.getElementsByClassName("top")[0];var n_half_height = window.screen.height / 2;ele_top.style.top = n_half_height + "px";window.onscroll = function (e) { var n_stop = e.target.scrollingElement.scrollTop; if (n_stop === 0 ) {  ele_top.style.visibility = "hidden"; }else {  ele_top.style.visibility = "visible"; } var n_top = n_stop + n_half_height ; ele_top.style.top = n_top + "px";}

The final effect is shown as follows:

The above is all the content of this article, hoping to help you learn.