Recently in the blog directory function, found a bug in the modern browser, or called the difference, that is, page scrolling value (scrolltop) acquisition and settings.
Before that, let's talk about the coordinates of the page element to get, the classical of this picture need not mention.
implement scrolling to a location function
One of the most important functions is to achieve the click of the title page scrolling, because we want to scroll to a page title, so we need to calculate the scrolling element of the specific absolute position, and the commonly used offsettop is to get to the current element and the most recent decision on its positioning of the offset, this does not apply
Here you should use the Getboundingclientrect interface provided by the browser, which returns the absolute position of the element away from the browser's margins, which is irrelevant to what type of location, and is ideal for making page scrolling effects.
To get the data that scrolling needs, the body's scrolltop is the height that the page has been hidden by scrolling, and then the distance from the top of the browser is obtained based on the interface mentioned above, which can be used to calculate the desired scrolling height, as shown in the diagram below:
So, the page to scroll to the location is:
Here, incidentally, Getboundingclientrect (). top Gets the difference between scrolling hidden and not scrolling:
As you can see above, even if you want to scroll to the element part of the browser boundary, get to the top is negative, so the calculated page height is still correct.
Click on the directory to jump the function is done, so far are perfect.
compatibility issues with Firefox and Chrome scrolltop
Until I found today in the Firefox test, Firefox under the page scrolling jump function can not be used.
1. Native Interface test
Here, let me mention:
document.documentelement is the document.body is the <body> element.
Test results, in Firefox only through the HTML elements to get and set the page scrolling height, and on Google on the contrary can only use the BODY element to get and set.
2. jquery Interface Test
It uses the native scrolltop attribute to get and set, and jquery itself implements the encapsulation of the scrolltop attribute, and can try his compatibility.
Found using $ (document) can be achieved to obtain and set the ScrollTop compatible, exultation.
3, scrolltop animation implementation test
Although compatible, but in order to have a better effect, I want to use animation to scroll to a place in the page, rather than a direct jump, here using jquery animate function to achieve.
found that although you can use $ (document) to achieve access and settings, but the animation effect is not available, or only the BODY element and HTML elements to achieve.
Final Solution
The most perfect solution is:
Gets or sets the current page scrolling height directly:
Animation effect Set the current page height:
The above is to solve the JS page scrolling effect scrolltop in Firefox and Chrome browser compatibility problem, I hope to help you learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
