_javascript tips for returning top button based on JavaScript implementation

A Web page content, will be split screen display data, if a lot of screen, the user access to the data has been to the bottom of the page, this time to return to the top is also a need for a few minutes. This may be a bit lame for the user experience. So many pages of page data, now will use a "back to the top" button to quickly jump to the top of the page.
So now we're going to implement a feature like that.

We don't write any data on this page, just add a tag as a button to return to the top and give him a class name: Tops.

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

And then set its 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 set to 3000 height, the main is to make the page has the effect of scrolling. Buttons are generally placed on the right side of the page to the lower position. Here we set it by position.

We also want to analyze that when the user's access to the page at the top of the page, this button is definitely not displayed. So here we use the visibility to control the display of the button.

The interface is very simple, we will first. Below to analyze the implementation of JS.

The first button is the effect on the entire page, so the listening scrolling event needs to be set on the entire window. So we set a onscroll event for the window.

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

In this event we control the upper and lower position of the top button and whether it is displayed. First to complete the upper and lower position control.

Up and down position control, we certainly have to calculate the height of scrolltop, and the height of the page single-screen display. When the user enters the page, we default to this button placed in the right middle of the page position. The calculation is:

var n_half_height = WINDOW.SCREEN.HEIGHT/2;

Assign this value to the top property of the button.

Then if the user scrolls, the position is definitely unchanged, and the calculation should be

var n_stop = e.target.scrollingelement.scrolltop; Get the height of scrolltop
var n_top = n_stop + n_half_height;//Get position

This is the E object is the parameter event in the Onsroll. Here I am using Google browser. Other browsers are not tested. If you need to be compatible, you can take care of it.
Each scroll has to calculate its height, so this should be placed in the Onscroll event. Then, assign this value to the top property of the button.

Certainly do not forget one thing, is when the scrolltop is 0, the button does not need to display. is greater than 0, you have to let the button show. We used the visibility attribute to control this, so 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";
}

The final results show:

The above is the entire content of this article, I hope to help you learn.