What do you generally think of as a way to improve the user experience when a user triggers page scrolling on mobile?

In the early days of JQuery, you could call the $.animate() method, using the following:

$("#scroll_container").animate({ scrollTop: "0px" }, 500); // For 500 milliseconds, scroll to the topCopy the code

Of course, the most primitive and direct way is to use anchor location in web pages.

<a href="#"> Return top </a>Copy the code

When we click on the link, the page immediately goes to the top, but isn’t it too simple for such a pure effect, without any interaction…

Of course, browsers also provide some new properties and methods,

The first is the CSS property:scroll-behavior

The interpretation on MDN is as follows:

The CSS property scroll behavior specifies the scrolling behavior of a scroll box when the user manually navigates or the CSSOM scrolling API triggers it. Any other scrolling, such as those caused by user actions, is not affected by this property. When you specify this attribute in the root element, it applies to Windows instead.

There are two commonly used attributes:

scroll-behavior: auto; // Default value scrollbehavior: smooth; // Smooth effectCopy the code

Usage: Write the scroll behavior:smooth on the scroll container element, when the user triggers an event, it will have a smooth scroll effect.

The Demo:

CSS code:.label {width: 100px; margin-right: -1px; border: 1px solid #ccc; border-bottom: 0; padding-top: 5px; padding-bottom: 5px; background-color: #eee; text-align: center; float: left; } .box { height: 200px; border: 1px solid #ccc; scroll-behavior: smooth; overflow: hidden; } .content { height: 100%; padding: 0 20px; position: relative; overflow: hidden; } .box input { position: absolute; top:0; height: 100%; width: 1px; border:0; padding: 0; margin: 0; clip: rect(0 0 0 0); } HTML: <div class=" TAB "> <label class="label" for="tab1"> TAB 1</label> <label class="label" for="tab2"> TAB 2</label> <label Class ="label" for="tab3"> </label> </div> <div class="box"> <div class="content"><input ID ="tab1"> <p> </div> <div class="content"><input id="tab2"> <p> I am the content of tab2 </p> </div> <div class="content"><input id="tab3"> <p> I am the contents of TAB 3 </p> </div> </div>Copy the code

So. Wouldn’t it be cool to add a line of code and scroll?

The second is for the DOM elementscrollIntoView()methods

Is also a browser-supported native jsAPI that scrolls through the element’s parent container,

Grammar:

element.scrollIntoView(); // Equates to element.scrollinToView (true) Element.scrollintoView (alignToTop); // Boolean element. ScrollIntoView (scrollIntoViewOptions); // Object parametersCopy the code

Use as follows:

targetElement.scrollIntoView({
    behavior: "smooth",
    block: "end",
    inline: "nearest"
});
Copy the code

You can also pass only one parameter (options) or no parameter. For more information, see MDN

Compatibility:

Scroll – behaviors:

ScrollIntoView:

If there is a better way, welcome to leave a message, the first time to see will be timely reply. Thank you!