CSS set Scroll behavior: smooth; CSS set scroll behavior: smooth; CSS set scroll behavior: smooth; Property and use the window.scrollto (options) method. In addition to these two postures, there are two other postures for smooth scrolling, They are Element. ScrollIntoView (scrollIntoViewOptions) method and window. RequestAnimationFrame (the callback).

css scroll-behavior

scroll-bahavior: smooth; Added to the scroll container element to smooth the scroll of the container. For example, in the PC browser, the default scrolling of the web page is on the label, and most of the mobile end is on the label. We can add HTML and body, and when clicking the “Back to the top” button on the page, the smooth scrolling of the page can be realized.

html, body {
    scroll-bahavior: smooth;
}
Copy the code

As of now, not all browsers support this property:

window.scrollTo()

Window.scrollto (x, y) scrolls the page to a location by passing in x and y coordinates in the document (document in HTML). The API also supports passing in an Options object, where the left attribute equals the x-coordinate; The top attribute is equivalent to the y-coordinate; The behavior attribute represents the rolling behavior. It is of type String and can be smooth, instant, or auto (default). The measured effect of Auto is equal to instant.

ScrollTo ({left: 0, // x coordinate top: 0, // y coordinate behavior: 'smooth' // Optional: smooth, instant, auto})Copy the code

All major browsers support the API, but Internet Explorer and Safari do not support the options option:

Element.scrollIntoView()

The scrollIntoView() method of the DOM element scrolls the current element into the viewable area of the browser window. This method allows you to pass in a scrollIntoViewOptions object, where the Behavior property defines the animation transition for scrolling. The options are auto or smooth, and the default is auto without animation. Smooth allows the page to scroll smoothly.

target.scrollIntoView({
    behavior: "smooth"
});
Copy the code

We open any page with a link, scroll the first link out of the screen, and then the console type something like the following to see the page scroll smoothly:

document.links[0].scrollIntoView({
    behavior: "smooth"
});
Copy the code

All browsers support the API, but Internet Explorer and Safari do not support the scrollIntoViewOptions option:

requestAnimationFrame

RequestAnimationFrame is a browser interface for timed loops, similar to setTimeout, that redraw a web page frame by frame. This API simply tells the browser that it wants to execute an animation and then calls the specified callback to update the animation before the next redraw.

RequestAnimationFrame takes a callback function as an argument, which is executed before the browser’s next redraw.

requestID = window.requestAnimationFrame(callback);
Copy the code

The return value of requestAnimationFrame is a long integer, which is the unique identifier in the callback list. This value can be passed on to the window. The cancelAnimationFrame () to cancel the callback function.

We use requestAnimationFrame() to return to the top of the page:

const backToTop = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    window.scrollTo(0, scrollTop - scrollTop / 8);
    window.requestAnimationFrame(backToTop);
  }
}

window.requestAnimationFrame(backToTop);
Copy the code

Note that requestAnimationFrame is done on the main thread. This means that if the main thread is very busy, the animation of the requestAnimationFrame will be compromised.

Almost all the major browsers support Windows. RequestAnimationFrame:

Reference Documents:

Javascript.ruanyifeng.com/htmlapi/req…

Developer.mozilla.org/zh-CN/docs/…