Native JS implements smooth back to the top component _ javascript skills

The back-to-top component is an extremely common web page function with simple requirements: After a page is rolled for a certain distance, the button on the back-to-top is displayed, click this button to roll back the scroll bar to the starting position of the page. Next, we will introduce the native JS to achieve smooth back to the top component through this article, if you need a friend, please refer to it. The "Back to Top" component is an extremely common web page function. Simple requirements: After the page is rolled for a certain distance, the "Back to Top" button is displayed, click this button to roll back the scroll bar to the starting position of the page.

It is also easy to think about. You only need to change the value of document.doc umentElement. scrollTop or document. body. scrollTop.

This article abandons all the cool effects of acceleration and deceleration, returns to the essence of the software, and provides the most concise implementation, only the pursuit of practicality, not the so-called user experience, the effect is as follows:

Because both the idea and code are simple, the implementation details are directly posted:

var BackTop = function (domE,distance) {if (!domE) return;var _onscroll = window.onscroll,_onclick = domE.onclick;window.onscroll = throttle(function(){typeof _onscroll === 'function' && _onscroll.apply(this, arguments);toggleDomE();},100);domE.onclick = function(){typeof _onclick === 'function' && _onclick.apply(this, arguments);document.documentElement.scrollTop = 0;document.body.scrollTop = 0;};function toggleDomE(){domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';}function throttle(func, wait) {var timer = null;return function () {var self = this, args = arguments;if (timer) clearTimeout(timer);timer = setTimeout(function () {return typeof func === 'function' && func.apply(self, args);}, wait);}}}; 

Call method:

《script》new BackTop(document.getElementById('backTop'))《script》 

There are two reasons for writing this blog to make such a simple thing:

1) I have been writing some common simple components during this time. This is a simple and simpler one. To make this series of blogs more complete, I have added this component;

2) I want to express my point of view during my work: Do not use the user experience to describe your software or product. To put it bluntly, there are two words about user experience, one is a good impression, and the other is fun, but this is not the ultimate goal of product development and operation. If you make things more beautiful and the core value and service of the product are not enough, it is futile to make the function of returning to the top of the record into a Super invincible rocket. For front-end development, You have to exercise the points to control the degree of user experience functions that the product manager blindly mentions. In this component, I think the acceleration or deceleration effect is redundant, which increases the development time, it also delays users' use of time and abandons their stubbornness in playing with technology, which can make their work more perfect.

Below we will share with you several common web pages that return the top code

I. Using the HTML anchor tag is the simplest

However, the only drawback is that the style is not very good and the anchor mark is displayed.

The Code is as follows:

Place inAfter the tag, you can find a place to put it at any time, as long as it is close to the top.

Place at the bottom of the page:

The Code is as follows:

Back to Top

Ii. Use the Javascript Scroll function to return to the top

The scrooll function is used to control the position of a scroll bar. There are two simple implementation methods:

Method 1 (recommended: Simple and Convenient ):

The Code is as follows:

Back to Top

The first parameter of scroll is the horizontal position, and the second parameter is the vertical position. For example, you can change it to scroll () to locate it at 50 pixels vertically.

Method 2 (effect-oriented: slow and upward ):

This method is to incrementally return to the top. The Code is as follows:

FunctionpageScroll () {window. scrollBy (0,-10); scrolldelay = setTimeout ('pagescroll () ', 100);} return to the top

In this way, the top is returned dynamically, but the code is still running even though the code is returned to the top. You also need to add a sentence in the pageScroll function to stop the code.

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

3. Use Onload and scroll to dynamically return to the top

Add the following before the webpage body Tag ends:

 
  
Back to Top
  

 

2. Call the following JS script:

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

These files can be stored on a webpage or independently saved into a js file, such as gotop. js, in the following form:

 
  《script》
 

Of course, it is best to place the location under the "Back to Top" label. This call method assumes that the file path is JS, And you can modify it according to your actual location.