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

Source: Internet
Author: User

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

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.