Implementing the return to top button based on Javascript_javascript skills

When a webpage has too much content, the data will be displayed in split screens. If there are many screens, the data accessed by the user has reached the bottom of the page, and it will take some time to return to the top. This may be detrimental to the user experience. A little bit worse. Therefore, web pages with a lot of page data will now use a "Back to Top" button to quickly jump to the top of the web page.
Now let’s implement such a function.

We won’t write any data on this page, just add an a tag as a button to return to the top, and give it a class name: top.

<a href="#" class="top">顶部</a>

Then set its stylesheet:

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 give the page a scrolling effect. Buttons are generally placed a little lower on the right side of the web page. Here we set it through position.

We also need to analyze that when the webpage the user visits is at the top of the page, this button will definitely not be displayed. So we use visibility here to control whether the button is displayed or not.

The interface is very simple, let’s just deal with it first. Let’s analyze the implementation of JS.

First of all, this button has an effect on the entire web page, so the scroll event monitoring needs to be set on the entire window. Therefore, we set an onscroll event for the window.

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

In this event we control the up and down position of the return to top button, and whether to display it. First, complete the control of the up and down position.

To control the top and bottom positions, we must calculate the height of the scrollTop and the height of the single-screen display of the web page. When the user enters the page, we place this button in the middle right position 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 user scrolls, the position will definitely remain unchanged, and the calculation at this time should be

var n_stop = e.target.scrollingElement.scrollTop; //获取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置

This is the e object which is the parameter event in onsroll. Here I am using Google Chrome. Other browsers have not been tested. If compatibility is required, you can deal with it.
Each scroll must calculate its height, so this should be placed in the onscroll event. Then, assign this value to the top attribute of the button.

Of course, don’t forget one thing, that is, when scrollTop is 0, the button does not need to be displayed. When it is greater than 0, the button must be displayed. As mentioned before, we use the visibility attribute to control it. This way the code is complete.
Javascript complete 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";
}

Final effect display:

The above is the entire content of this article, I hope it will be helpful to everyone’s study.