Native JS realizes smooth return to top component _javascript tips

Source: Internet
Author: User

Return to the top component is a very common Web page features, simple requirements: After a certain distance of the page scrolling, display the button to return to the top, click on the button to roll back to the beginning of the page position.

It is also easy to realize the idea, as long as you change the value of Document.documentElement.scrollTop or Document.body.scrollTop.

This paper discards all the cool effects of accelerated deceleration, return to the nature of the software, provide a most concise implementation, only the pursuit of practicality, not the pursuit of so-called user experience, the effect is as follows

Because the idea and the code are very simple, so directly posted 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);
c24/>}
}

Call Mode:

<script>
New Backtop (document.getElementById (' backtop '))

There are two reasons to write this blog, such a simple thing:

1 This period of time has been handwritten some common simple components, which is a simple simpler one, in order to make this series of blog more complete, so this component to add in;

2 I would like to express myself in the course of the work of a point of view: is not to transition with the user experience to decorate your software or products, user experience this thing plainly is two words, one is a good impression, the second is fun, but this is not the ultimate goal of product development and operation, you make things beautiful, The core value of the product and the service is not enough, even if the return to the top of this function to make Super invincible rocket is futile. To do the front-end development, exercise point control product manager to blindly mention the user experience function of the degree, to this component, I think to do acceleration or deceleration effect are redundant, both increase the development time, and delay the user to use the time, abandon their own heart that point to the technology of the stubborn, can make their work more perfect.

Here to share several common Web pages return to the top of the code

First, the use of HTML anchor tag is the simplest

But the only drawback is that the style is not good, it will show this anchor tag.

Copy Code code as follows:

<aname= ' top ' id= ' top ' ></a>

Place in the <body> after the label to find a place to put all you can, as long as close to the top of the.

Bottom page Placement:

Copy Code code as follows:

<ahref= "#top" target= "_self" > Back to Top </a>

Second, use the JavaScript scroll function to return to the top

The Scrooll function is used to control the position of the scroll bar, and there are two simple ways to implement it:

Mode 1 (recommended: Simple and convenient):

Copy Code code as follows:

<ahref= "Javascript:scroll (0,0)" > Back to Top </a>

Scroll the first parameter is the horizontal position, the second parameter is a vertical position, for example, to locate in the vertical 50 pixels, change to scroll (0,50) on it.

Mode 2 (Focus on effect: slow up):

This method is to return to the top of the progressive, to look good, the code is as follows:

Functionpagescroll () {Window.scrollby (0,-10); Scrolldelay=settimeout (' PageScroll () ', 100);} <ahref= "PageScroll ();" > Back to Top </a>

This will dynamically return to the top, but although the code is still running back to the top, you need to stop the PageScroll function by adding a sentence.

if (document.documentelement.scrolltop==0) cleartimeout (scrolldelay);

Third, the use of onload plus scroll function to achieve dynamic return to the top

First, before the end of the page body tag, add:

<divid= "Gotop" > Back to Top </div>

2, and then call the following JS script section:

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 the Web page, can also be stored independently into a JS file, such as Gotop.js, and then through the following forms:

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

To invoke, of course, the location is best placed below the "Back Top" tab, the calling method has assumed that the file path is JS and placed in a different location, depending on the actual modification.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.