Click the "back to top" button on the page to scroll to the top in several ways
1. Use anchor point
1) Use the default link anchor point, set the href attribute value of a link to "#top" to achieve
<div><a href=" ">back to top</a ></div>
2) href points to a specific id
<div id="element1">element 1</div>
<a href="#element1">back to element 1</a>
2. ScrollTop attribute: When the
element is not scrolled, the value of scrollTop is 0. If the element is scrolled vertically, the value of scrollTop is greater than 0 and represents the pixel width of the invisible content above the element
document.body.scrollTop = document.documentElement.scrollTop = 0
3. ScrollTo(0,0) method: The parameter is the coordinate point, (x,y)—the coordinate point The point
specified by the coordinates x and y is located in the upper left corner of the display area
Fourth, scrollBy (dx, dy) method: the parameter is distance dx-represents the horizontal distance, dy-represents the vertical distance
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top)
HTML control properties: offsetTop. offsetLeft. offsetWidth. offsetHeight
body does not belong to HTML controls
obj.offsetTop — refers to the position of obj from the top or the upper control (parent), integer, unit pixel.
obj.offsetLeft — refers to the position of obj from the left or the upper control (parent), integer, unit pixel.
obj.offsetWidth refers to the width of the obj control itself, integer, unit pixel—including borders, scroll bars, and visible area
obj.offsetHeight refers to the height of the obj control itself, integer, unit pixel—including borders, scroll bars, and visible area
The difference between offsetTop and style.top, offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height
1) offsetTop returns a number with a px unit, while style.top returns a string
2) offsetTop is read-only, while style.top is readable and writable
3) If no top style is specified for the HTML element, then style.top Returns an empty string
clientHeight, clientWidth, clientLeft, clientTop—body and HTMl controls have this property
clientHeight——The height of the visible area of the content, that is to say, the height of the area where the content can be seen in the page browser, generally from the area below the last toolbar to above the status bar. It has nothing to do with the content of the page, that is, except The height of the scroll bar and the height of the border, the remaining height is the height of the viewable area
clientWidth——The width of the visible area of the content
clientLeft————Can be considered as the length of the left border Clienttop————Can be considered as the length
of the upper border
scrollLeft、scrollTop、scrollHeight、scrollWidth
scrollLeft————The width rolled up on the left
scrollTop——————The height rolled up on the top
scrollHeight————The absolute height of internal elements, including the hidden part of
internal elements Hidden parts of internal elements
1. You can set the effect of element scrolling:
1) scrollLeft—Set/get the distance of the element to scroll horizontally to the right. For
example: the page has multiple tab items, and the page is initialized successfully, so that it will automatically scroll to the last tab item, and the last item It exceeds the maximum width of the page and is blocked. At this time, scrollLeft needs to be set to achieve the scrolling effect
Get the width of the viewport element: this.$refs.timeTab.offsetWidth
Save the distance of each tab item relative to the left side of the viewport:
position = 0
Set the width of each tab item: itemWidth
for (let i = 0; i <this. dynamicTabList.length; i++) {this.offset [i] = (i-position) * this.itemWidth }
When the element width exceeds the container width, the value of scrollLeft will take effect, otherwise it will always be 0
2) scrollTop—Set/get the scrolling distance of the element.
When clicking on a tab item, the page scrolls to the specific content area.
When the element height exceeds the viewport height, the scrollTop value is set to take effect, otherwise it is always 0
When the page scrolls down to a certain distance, the "back to top" copy is displayed, click on the copy to return to the top of the page
Reference article: https://blog.csdn.net/zh_rey/article/details/78967174
Chestnut: The page is initialized successfully, let it automatically locate to a specific tab item, and use scrollLeft to achieve horizontal scrolling
For example: the tab status has "already rushed, in the process of rushing, and about to be rushed"
Effect: After the page is initialized successfully, it will automatically slide to the tab item in the "buying" state
scrollLeft can set the scrolling effect
The element needs to be set to overflow and cannot be visibility
And you need to change the width of the element to exceed the width of the parent element before the assignment to this.$refs.tabDiv.scrollLeft is successful, otherwise it is always 0 and the assignment is unsuccessful
For example: the tab data is obtained through the interface. At this time, you need to call the method of setting scrollLeft in this.$nextTick(() => {}) in this method to achieve the sliding effect
The problem of using scrollTop
If the page has an input textarea box and a button at the bottom of the page, when the input box is focused, clicking the button will trigger the button event intentionally, but the input defocus event will be triggered first. If it is in the defocus event at this time, Set the scrollTop value to the page, which will cause the position of the button to change on the page, so that the button event will not be triggered
The input defocus event will be triggered before the button click event