A simple return to the Top Effect

The function of returning to the top is often seen on the webpage, but most of them are directly located on the top using simple anchors, which is too abrupt for users, smooth transition should be a good user experience.

However, in terms of performance, it is not necessary to directly locate to the top of the page to use scripts, and the performance is higher.

The following is an example of a simple test:

Locate the anchor

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Test text

Back to Top

The implementation script is as follows:

 1  Function  RT (){  2       VaR D = Document,  3 Dd = Document.doc umentelement,  4 DB = Document. Body,  5 Top = dd. scrolltop | DB. scrolltop,  6 Step = math. Floor (top/20 );  7 (Function  (){  8 Top-= Step;  9           If (Top>- Step ){  10 Dd. scrolltop = 0? DB. scrolltop = Top: dd. scrolltop = Top;  11 SetTimeout (arguments. callee, 20 );  12   }  13  })();  14 }

This method is applicable to document.doc umentelement and document. Body in many related books:

 
VaRMode = Document. compatmode = 'css1compat '? 'Documentelement': 'body ';
 

The compatmode method is used to determine whether the browser is in the standard or weird mode (IE), but the Chrome browser is slightly different in processing.

For chrome, the values of document.doc umentelement. scrolltop and document.doc umentelement. scrollleft are both 0. If no correct data is obtained, document. Body. scrolltop is used.

And dcoument. Body. scrollleft return the correct data. I don't know why Chrome is out of the standard. ThereforeCode5th rows use

 
Top = dd. scrolltop | dB. scrolltop
 

To obtain the corresponding scrolltop value. For chrome, the value of DB. scrolltop is obtained, which ensures that this function can run correctly on several main browsers. The second half of the Code is continuously reduced through Intermittent calls.

Scrolltop value until the top of the browser. Safari was not tested during the test, because Apple recently stopped safari's support for PC platforms, and the official website does not provide safari download.

 

This example is not over yet. You can extend it. For the function of returning to the top, you may naturally think of the anchor function. In the traditional anchor implementation, the user experience is not very good. If you find a bunch

In the dense text, it is more eye-consuming to live. Css3 considers this and adds a target pseudo class to the element. For example, if you click "locate to anchor" in the above example, the matching position will be marked with a green background,

It looks eye-catching. The style code is as follows:

 
P: Target{Background-color:#9acd32}
 

Old browsers do not support this pseudo class and cannot use this effect.

 

Finally, I learned the following knowledge points through this example:

1. Special Features of scrolltop in chrome;

2. Use of the target pseudo class in css3;

3. As long as the statement <! Doctype>, the browser will not enter the weird mode, including IE6. Previously, it was thought that xhtml1.0 needs to be declared. You can return documentelement or body through the browser to confirm.

 

The above are some of my personal experiences. I hope you can give your valuable comments and correct them more.

 

 

Indicate the source for reprinting.