Add a floating button click to scroll to the bottom of the Web page of the Pure JavaScript demo code IE9, 11,maxthon 1.6.7,firefox30, 31,Speed browser 7.5.3.308 under normal test

These two days want to add a floating button in the Web page, click the button to scroll to the bottom of the page. on-line Bing searched for a bit, mostly jquery.

I want pure JavaScript, have to DIY. Test normal under IE9, 11,maxthon 1.6.7,firefox30, 31,360 Speed browser 7.5.3.308.

The difficulty is that setscrollbottom this function.

According to the general wording:

function Setscrollbottom (value) {if (Document.documentElement.scrollTop) {Document.documentElement.scrollTop + = Value;} else {document.body.scrollTop + = value;}}

Clicking on the Floating button when the page first loads is complete will not work in IE9, 11,maxthon 1.6.7,firefox30, 31, or in the 360 speed browser.

Invalid in IE9, 11,maxthon 1.6.7,firefox30, 31 because the scroll bar button is at the top, Both Document.body.scrollTop and Document.documentElement.scrollTop values are 0,document.documentelement.scrolltop + = value; Will not be executed, while Document.body.scrollTop + = value will be executed, but because the document type is declared, Document.body.scrollTop is 0.

Effective in 360 speed browser, because even if the document type is declared, the chrome kernel still does not recognize Document.documentElement.scrollTop, only with Document.body.scrollTop.

If you change to:

function Setscrollbottom (value) {if (Document.body.scrollTop) {document.body.scrollTop + = value;} else { document.documentelement.scrolltop+= value;}}

The effect will be reversed.

To Qimei, of course, we can do this by adding code that identifies the browser type, but we can make a simple distinction with whether the Document.body.scrollTop value is constant 0, as shown in the following demo code.

BTW, find the simple code of two direct sink online:

Its 1:

<a href= "#1" onclick= "Window.scrollto (0,99999); return false;" > Jump to the bottom of the page method 1</a>

Idea: Document.all[document.all.length-1] gets the last element. scrollIntoView () scrolls into sight. IE and Firefox are OK. The last element of the document does not apply at the bottom.

Its 2:

<a href= "#1" onclick= "Window.scrollto (0,99999); return false;" > Jump to the bottom of the page method 2</a>

Idea: Just scroll to a far away place.

Also put in the demo code.

<! DOCTYPE html>


Add a floating button click to scroll to the bottom of the Web page of the Pure JavaScript demo code IE9, 11,maxthon 1.6.7,firefox30, 31,360 Speed browser 7.5.3.308 under normal test