Mobile phone side scroll to page to specify location

scrollIntoViewOptions is very useful, but currently only supported by Chrome and FireFox, but can be implemented by other plugins (smoothscroll-polyfill)span>

Example

document.getElementById('content').scrollIntoView({block: 'start',inline: 'nearest',behavior: 'smooth'})

Documentation

The first solution: the method parameter is passed "alignToTop"

Previously this parameter was well supported

scrollIntoView(alignToTop); // Boolean parameter

alignToTop
A Boolean value:

• • If true, the top of the element will be aligned with the top of the visible area of ​​the scroll area it is in.
  • If false, the bottom of the element will be aligned with the bottom of the visible area of ​​the scroll area it is in.

 true : The top of the element will be aligned to the top of the scrollable ancestor's visible area.Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"} which is the defaultfalse: The bottom of the element will be aligned with the bottom of the scrollable ancestor's visible area.Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

Use

document.getElementById('content').scrollIntoView(true);

---

The second solution (such as the example): pass "scrollIntoViewOptions" as a method parameter

Currently this parameter browser does not support it well, you can check the compatibility below

element.scrollIntoView(scrollIntoViewOptions); // Object parameter

behavior: [Optional] Define the transition animation."auto", "instant" or "smooth".Defaults to "auto".block : [optional] "start" (top), "center" (center), "end" (tail) or "nearest".Defaults to "center".inline: [optional] "start", "center", "end" or "nearest".Defaults to "nearest".

Use

document.getElementById('content').scrollIntoView({block: 'start',inline: 'nearest',behavior: 'smooth'})

---

Reference

http://mssn.midea.com/ask/?/article/230

https://zhuanlan.zhihu.com/p/342205449