Javascript to implement the "Back to Top" button in the lower right corner of the blog garden page
This article mainly introduces the idea and source code for using javascript to return the top button in the lower right corner of the blog garden page, which is very good. We recommend this article to our friends.
Many bloggers in the blog Park have an icon in the lower right corner of the Page. No matter how the screen is stretched, it stays in the lower right corner. Click to top the page. Next, let's write a Demo to achieve this effect.
1. fixed in the lower right corner of the icon.
1. The layout in "4" is provided in the SS, where "fixed" indicates the absolute positioning element. Therefore, we choose to use fixed to fix the icon.
Absolute |
Generates absolute positioning elements, which are located relative to the first parent element other than static positioning. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. |
Fixed |
Generates absolute positioning elements, which are located relative to the browser window. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. |
Relative |
Generates relative positioning elements and locates them relative to their normal locations. Therefore, "left: 20" adds 20 pixels to the LEFT position of the element. |
Static |
Default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or z-index declarations ). |
Inherit |
Specifies that the value of the position attribute should be inherited from the parent element. |
2. Set the Code as follows. The Button is always placed in the lower right corner of the screen. Whether it is dragging up or down the precision bar or stretching the browser window size.
The Code is as follows:
# MyTopBtn {
Bottom: 5px;
Right: 5px;
Position: fixed;
}
2. Click to return to the most secure page.
1. If you want to return to the screen, you need to know how to use JavaScript to move up and down the drag bar. JavaScript provides the scrollby and scroll methods.
The Code is as follows:
Window. scrollBy (0,-30) // 30 pixels move up the screen
Window. scroll () // The Screen returns to the nearest
2. As mentioned above, how can we move a bar to the top of the page at a certain speed. The setInterval and clearInterval methods are used to remove 30 pixels from the screen in less than 10 milliseconds.
The Code is as follows:
<Body>
<Div id = "myDiv">
</Div>
<Button id = "myTopBtn" onclick = "TopFunc ()"> To Top </button>
</Body>
The Code is as follows:
Var myVar;
Function TopFunc (){
MyVar = setInterval (EachScrollBy, 10 );
}
Function EachScrollBy (eachHeight ){
If(document.doc umentElement. scrollTop <= 0 ){
ClearInterval (myVar );
} Else {
Window. scrollBy (0,-30 );
}
}
Iii. Extensions
Implemented the pin button. So how can we achieve the bottom of the screen by clicking the button? In fact, the principle is similar. Here we will not write a demo. Some attributes are provided for reference.
The Code is as follows:
Visible area width of the webpage: document. body. clientWidth
Visible area height: document. body. clientHeight
Visible area width of the webpage: document. body. offsetWidth (including the width of the edge)
Visible area height of the webpage: document. body. offsetHeight (including the width of the edge)
Webpage text width: document. body. scrollWidth
Webpage text height: document. body. scrollHeight
The height of the page to be rolled: document. body. scrollTop
Left: document. body. scrollLeft
Page body: window. screenTop
Page body part left: window. screenLeft
Screen Resolution height: window. screen. height
Screen Resolution width: window. screen. width
Available screen workspace Height: window. screen. availHeight
Available workspace width: window. screen. availWidth
The above is all the content in this article. I hope that the kids who love to play with blogs will like it.