JS implementation back to the top of the button program code

It is important to use JS to achieve, do not need to add any content in HTML, CSS, and even do not need pictures, as long as the reference JS can be. and fully compatible with IE6. Due to consideration of compatibility issues

The realization principle is that we get the current IE height and then scroll up

The former mainstream browser is better than IE for browser standard support, such as Chrome, Firefox and Safari. For the latter, you can take the Window object's pageYOffset property to the height of the current scroll bar to the top of the page. For the evil of IE is a bit more cumbersome, it relies on the current document type. The document types are divided into standards mode and quirks mode, and the page declares that DOCTYPE is standards mode, whereas quirks mode. can be obtained using Document.compatmode, which also supports other browsers with a return value of Backcompat or Css1compat, meaning the following:

The code is as follows	Copy Code
Backcompat standards-compliant mode isn't switched on. (Quirks Mode)

Css1compat standards-compliant mode is switched on. (standards mode) the way to get the scroll bar height is different because IE has a lot to do with the file type of the rendering of the box model. When the document type is Standards mode, the Get mode is: Document.documentElement.scrollTop, and quirks mode is: Document.body.scrollTop.

After understanding the differences mentioned above, it is easy to implement the code as follows:

The code is as follows	Copy Code
function GetScrollTop1 () { if (' pageYOffset ' in window) { return window.pageyoffset; else if (Document.compatmode = = "Backcompat") { return document.body.scrollTop; } else { return document.documentElement.scrollTop; } }

You can even modify the above code and use one line of code to do it, but the readability is not good, the code is as follows:

code is as follows

copy code

Function Getscrolltop () {     return! (' pageYOffset ' in window '                 ? (Document.compatmode = = "Backcompat")                ? Document.body.scrollTop                 : Document.documentElement.scrollTop                 : Window.pageyoffset; } or function Getscrolltop () {     return (' pageYOffset ' in window)? window.pageyoffset        : Document.compatmode = = "Backcompat"          && document.body.scrollTop         | | Document.documentElement.scrollTop; }

In addition to the above Document.compatmode way to get the document type, you can also use Document.defaultview to get it. Document does not support DefaultView properties in quirks mode under IE 9

Take a look at so many of the following implementation code code is as follows:

The code is as follows

Copy Code

(function () { var Btnid = ' __gotop '; var Isie =!! Window. ActiveXObject &&/msie (d)/i.test (navigator.useragent)? Regexp[' $ ': false; function $ () { return document.getElementById (Arguments[0]); }     function Getscrolltop () {         return (' pageYOffset ' In window)? Window.pageyoffset            : Document.compatmode = = = "Backcompat"             && Document.body.scrollTop             | | Document.documentElement.scrollTop;    }    function Bindevent (event, func) { if (Window.addeventlistener) { Window.addeventlistener (Event, func, false); else if (window.attachevent) { Window.attachevent (' on ' + Event, func); } } Bindevent (' Load ', function () { var css = ' background-color: #999; width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px ; cursor:pointer;display:none; ';             if (Isie && Isie < 7) {                  css + = ' _position:absolute;_ Top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-30-this.offsetheight-(parseint (this.currentstyle.margintop,10) | | 0)-(parseint (this.currentstyle.marginbottom,10) | | 0)) ';                 var style = Document.createstylesheet ();                 style.csstext = ' * Html{background-image:url (About:blank); background-attachment:fixed;} ';            } var html = ' <div style= ' height:0;width:0;border:14px solid #999999 border-top:0 none;border-bottom:14px solid #fff;p osition:relative;margin:12px 0 0 11px; " ><div style= "Width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color: #fff; overflow: hidden; " ></div></div> '; var el = document.createelement (' DIV '); El.id = Btnid; El.style.cssText = CSS; el.innerhtml = html; Document.body.appendChild (EL); El.onclick = function () { (function () { var top = getscrolltop (); if (Top > 0) { Window.scrollto (0, top/1.2) SetTimeout (Arguments.callee, 10); } })(); }; El.onmouseover = function () { $ (btnid). FirstChild.style.borderBottom = ' 14px solid #ddd '; $ (btnid). FirstChild.firstChild.style.backgroundColor = ' #ddd '; }; El.onmouseout = function () { $ (btnid). FirstChild.style.borderBottom = ' 14px solid #fff '; $ (btnid). FirstChild.firstChild.style.backgroundColor = ' #fff '; }; } ); Bindevent (' scroll ', function () { var top = Getscrolltop (), display = ' none '; if (Top > 0) { display = ' block '; } if ($ (Btnid)) $ (btnid). style.display = display; }); })();