Javascript implements the return to top button in the lower right corner of the blog page_javascript skills

Many bloggers in the blog garden have an icon in the lower right corner of the page in their blogs. No matter how the screen is stretched, it always stays in the lower right corner. Click to pin the page to the top. Think about writing a Demo later to achieve this effect.

1. The lower right corner of the icon is fixed.

　 1.SS provides 4 layout methods. Fixed means absolutely positioned elements. So we choose to use fixed to achieve icon fixation.

absolute

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

Generates an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

fixed

Generate an absolutely positioned element, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

relative

Generates a relatively positioned element, positioned relative to its normal position. So "left:20" adds 20 pixels to the element's LEFT position.

static

Default value. Without positioning, the element appears in normal flow (ignoring 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. The code is as follows. The Button button will always be placed in the lower right corner of the screen. Whether it’s dragging the upper and lower precision bars or stretching the browser window size.

Copy code The code is as follows:

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

2. Return to the top corner of the page after clicking.

1. If you want to return to the top corner of the screen, you need to know how to move the drag bar up and down through JavaScript. JavaScript provides the scrollby and scroll methods.

Copy code The code is as follows:

window.scrollBy(0,-30) //Move the screen up by 30 pixels
window.scroll(0,0) // Return the screen to the top corner

2. We have mentioned how to move the drag bar above, so how to move it to the top of the page at a certain speed. Then you need to use the setInterval and clearInterval methods to move the screen up by 30 pixels in every 10 milliseconds.

Copy code The code is as follows:

To Top

Copy code The code is as follows:

var myVar;
Function TopFunc(){
MyVar=setInterval(EachScrollBy,10);
}

function EachScrollBy(eachHeight){
If(document.documentElement.scrollTop<=0){
               clearInterval(myVar);
         }else{
              window.scrollBy(0,-30);
}
}

3. Extension

Implemented the pin button. So how do we realize that clicking the button puts the screen at the bottom? In fact, the principle is similar, so I won’t write a demo here. Provide you with some attributes for reference.

Copy code The code is as follows:

The width of the visible area of ​​the web page: document.body.clientWidth
Web page visible area height: document.body.clientHeight
Visible area width of the web page: document.body.offsetWidth (including the width of the side lines)
The height of the visible area of ​​the web page: document.body.offsetHeight (including the width of the edge)
Web page body full text width: document.body.scrollWidth
Full text height of web page body: document.body.scrollHeight
The height of the page being scrolled: document.body.scrollTop
The left side of the web page being scrolled: document.body.scrollLeft
On the main body of the web page: window.screenTop
The left part of the main body of the web page: window.screenLeft
High screen resolution: window.screen.height
The width of the screen resolution: window.screen.width
Screen available work area height: window.screen.availHeight
Screen available work area width: window.screen.availWidth

The above is the entire content of this article. I hope children who love blogging will like it.