Native JS implements smooth return to the top component_javascript skills

The Back to Top component is an extremely common web page function with a simple requirement: after the page scrolls a certain distance, a Back to Top button is displayed. Clicking this button can scroll the scroll bar back to the beginning of the page.

The implementation idea is also very easy, just change the value of document.documentElement.scrollTop or document.body.scrollTop.

This article abandons all the cool effects of acceleration and deceleration, returns to the essence of software, and provides the simplest implementation. It only pursues practicality and does not pursue the so-called user experience. The effect is as follows

Since the idea and code are very simple, I will directly post the implementation details:

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);
}
}
}; 

Calling method:

<script>
new BackTop(document.getElementById('backTop'))
</script> 

The reason why I wrote this blog and made such a simple thing is for two reasons:

1) I have been writing some common simple components by hand during this time. This is the simpler of the simple. In order to make this series of blogs more complete, I added this component;

2) I want to express one of my views in the work process: don’t use user experience to decorate your software or products. To put it bluntly, user experience can be divided into two words, one is good impression, and the other is good impression. It's just fun, but this is not the ultimate goal of product development and operation. No matter how beautiful you make things, if the core value and service of the product are not enough, even if you make the function of returning to the top into a super invincible rocket, it will be in vain. . When doing front-end development, you have to exercise some control over the degree to which the product manager blindly mentions user experience functions. For this component, I think it is redundant to do acceleration or deceleration effects. It not only increases development time, but also delays users' time and abandons themselves. The stubbornness in playing with technology can make your work more perfect.

Let me share with you some common web page return to top codes

1. It is easiest to use HTML anchor tags

But the only drawback is that the style is not very good and this anchor tag will be displayed.

Copy code The code is as follows:

248880eee67e49e055bb813031cf47af5db79b134e9f6b82c0b36e0489ee08ed

You can place it anywhere after the 6c04bd5ca3fcae76e30b72ad730ca86d tag, as long as it is close to the top.

Place at the bottom of the page:

Copy code The code is as follows:

3084c989cc3fc7888f5bec97780f1351Back to top5db79b134e9f6b82c0b36e0489ee08ed

2. Use Javascript Scroll function to return to the top

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

Method 1 (recommended: simple and convenient):

Copy code The code is as follows:

6ef0781b13415735db0500a4e94ca4b1Back to top5db79b134e9f6b82c0b36e0489ee08ed

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

Method 2 (focus on effect: slowly upward):

This method is a gradual return to the top, which should look better. The code is as follows:

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

This will dynamically return to the top, but although it returns to the top, the code is still running, and you need to add a sentence to the pageScroll function to stop it.

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

3. Use Onload plus scroll function to dynamically return to the top

First add:

before the end of the body tag of the web page

<divid="gotop">返回顶部</div>

2. Then call the following JS script part:

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 can be placed in a web page, or can be saved independently as a js file, such as gotop.js, and then in the following form:

<scriptsrc="/js/gotop.js"type=text/javascript></script>

to call. Of course, it is best to place it under the "Return to Top" label. This calling method assumes that the file path is JS. Please modify it according to the actual situation when placing it in other locations.