Details about compatibility of scrollTop between FireFox and Chrome _ jquery

This article mainly introduces the details about the compatibility of scrollTop with FireFox and Chrome browsers. If you need it, you can refer to the latest project, which has a directory function, discover a bug in modern browsers, or known as a difference, that is, the acquisition and setting of the page scroll value (scrollTop.

Before that, let's talk about how to obtain the coordinates of the page elements. The classic nature of this graph does not have to be mentioned.

Scroll to a certain position

One of the main functions of the blog directory is to click the title page to scroll, because we want to scroll to a page title, so we need to calculate the specific absolute position of the scrolling element, offsetTop is commonly used to obtain the offset between the current element and the latest element to determine its position. It is not applicable here.

The getBoundingClientRect interface provided by the browser should be used here. This function returns the absolute position of the element from each margin of the browser and has nothing to do with the positioning type. It is very suitable for Page scrolling.

For more information about how to use the getBoundingClientRect function, see link 1 and link 2.

Obtain the data required for scrolling. The scrollTop of the body indicates the height of the page that has been hidden by scrolling. Then, obtain the distance between elements and the top of the browser based on the Interface mentioned above, you can calculate the expected rolling height. The relationship diagram is as follows:

Then, the page is to scroll to the following position:

The Code is as follows:

Document. body. scrollTop + element. getBoundingClientRect (). top;

The difference between elements obtained by getBoundingClientRect (). top is as follows:

As you can see, even if the element to be rolled out of the browser's boundary, the obtained top is a negative number, and the calculated page height is still correct.

The function of clicking the directory jump is complete, so far it has been perfect.

Compatibility between FireFox and Chrome scrollTop

I found in FireFox today that the jump function of Page scrolling under FireFox is unavailable.

1. Native Interface Test

Here we will first mention:

Document.doc umentElement isElement, while document. body isElement.

Test results: on Firefox, you can only use html elements to obtain and set the page scroll height. on Google, you can only use the body element to obtain and set the page scroll height.

2. jquery Interface Test

The above uses the native scrollTop attribute to get and set, and jquery also implements encapsulation of the scrollTop attribute. You can try its compatibility.

We found that using $ (document) can achieve compatibility with obtaining and setting scrollTop.

3. Test the scrollTop animation.

Although it is compatible, in order to have better results, I hope to scroll to a certain position on the page in an animated way, rather than directly jump. Here we use the animate function of jquery.

It is found that although $ (document) can be used to obtain and set the animation effect, it can only be implemented using the body and html elements.

Final Solution

The most perfect solution is:

Get or directly set the scroll height of the current page:

$ (Document). scrollTop (); // get, compatible with Firefox Google

Set the scroll height of the current page with animation effects:

$ ("Body, html"). animate ({scrollTop:...}); // animation scrolling effect, compatible with Firefox Google

For the final effect, click the directory link at the top of this article to view the effect:

JQuery CSS operations-scrollTop () method

Instance

Set

Vertical offset of the scroll bar in the element:

$(".btn1").click(function(){ $("p").scrollLeft(100);});

Definition and usage

The scrollTop () method returns or sets the vertical position of the scroll bar that matches the element.
Scroll top offset refers to the offset of the scroll bar relative to its top.
If no parameter is set for this method, the offset relative to the top of the scroll bar in pixels is returned.

Syntax

$(selector).scrollTop(offset)

Parameters	Description
Offset	Optional. Specifies the offset relative to the top of the scroll bar, in pixels.

Tips and comments

Note: This method is valid for both visible and invisible elements.
Note: When used to obtain a value, this method returns only the scroll top offset of the First Matching Element.
Note: When used to set the value, this method sets the scroll top offset of all matching elements.