JavaScript notes----Implement the top-right button on the page.

Starting with the blog, found that many bloggers in the blog Park blog in the bottom right corner of the page has an icon, regardless of how the screen stretched, always stay in the lower right corner. Click on the Post page top. Think back and write a demo to achieve this effect.

one. The bottom right corner of the icon is fixed.

The 1.SS provides 4 layout options. Where fixed indicates an absolutely positioned element. So we chose to use fixed to make the icon fixed.

　

Absolute	Creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Fixed	Generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Relative	Creates a relative positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the left position of the element.
Static	The default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).
Inherit	Specifies that the value of the position property should be inherited from the parent element.

2. Set the code as follows. button buttons will always be placed in the lower right corner of the screen. Whether you drag the upper or lower precision bar or stretch the browser window size.

#myTopBtn {        bottom:5px;        right:5px;        position:fixed;    }

Two. Implement click Back to the top corner of the page.
1. To get back to the top corner of the screen, learn how to manipulate the drag bar up and down through JavaScript. JavaScript provides the Scrollby and scroll methods.

Window.scrollby (0,-30)  // screen up 30 dots //  screen back to top corner

2. The above has mentioned how to move the drag bar, then how to achieve a certain speed to move to the top of page pages. Then the setinterval and Clearinterval methods should be used. The implementation does not have 10 milliseconds to move the screen up 30 pixels.

var MyVar;     function Topfunc () {        myVar=setinterval (eachscrollby,10);        }     function Eachscrollby (eachheight) {        if(document.documentelement.scrolltop<=0) {            Clearinterval (MyVar);        } Else {            Window.scrollby (0,-30);        }    }

three. Expansion
Implements the Sticky button. So how do we implement the Click Button screen to base it. In fact, the principle is similar, here is not to write the demo. To provide you with some properties for reference.

Web page Visible area width: document.body. clientwidth Web page Visible area height: document.body.clientHeight Web page Visible area width: document.body. offsetwidth (including the width of the edge) Web page Visible Area High: document.body.offsetHeight (including edge width) page Body Full text width: document.body. scrollwidth page Body Full text High: Document.body.scrollHeight　　 The page was rolled High: document.body. scrolltop webpage is rolled away left: Document.body.scrollLeft on the body part of the webpage: window. screentop page body part left: Window.screenleft High screen resolution: Window.screen.height width of screen resolution: Window.screen.width screen usable workspace height: window.screen. availheight screen Available work area width: window.screen.availWidth

　　　　

JavaScript notes----Implement the top-right button on the page.