A traditional anchor point problem was encountered in a recent project. So what is the anchor point problem?

Anchor point is a kind of hyperlink in web page production, also called named anchor. A named anchor, like a quick locator, is a kind of in-page hyperlink that is quite common. And you can quickly locate the content of the website through the menu.

The diagram above shows the anchor point. How can we achieve this requirement? Here are some examples of anchor points that can be used in different scenarios.

1.first blood

In the traditional development process, our anchor point is the form of a tag to jump to the corresponding ID for requirement implementation.

<a href="#content1">Menu1</a>
<a href="#content2">Menu2</a>

<div id="content1">Content1</div>
<div id="content2">Content2</div>
Copy the code

This is the anchor point solution provided by tag A.

2.double kill

Native JS to get and modify the scrollTop

In this case, we typically use the anchor Settings for page elements, or the back to top button.

/ / by element. The scrollTop to obtain the current element can scroll bar height / / document under the console output. The documentElement. The scrollTop = = = = > number / / returns a number types of content, Is the height of the scroll bar / / can also pass to highly scrollTop assignment to set the scroll bar / / in the console output document. The documentElement. The scrollTop = 0 / / will find has been rolling the scroll bar, scroll to the top page.Copy the code

In the JS world, browser compatibility is always a headache

Safari is used in the window. The pageYOffset IE is the document body. The scrollTop as well as the document. The documentElement. ScrollTop;

So consider browser compatibility issues, finally summed up a perfectly compatible code.

/ / get the scroll bar height compatibility writing var scrollTop = document. The documentElement. The scrollTop | | window. PageYOffset | | document. The body. The scrollTop;Copy the code

3.triple kill

The element.scrollintoView () method on MDN is an experimental feature, but it works in mainstream browsers and works surprisingly well. Without further ado, get right to the code.

// Jump an element to the top of the browser viewport element.scrollintoView ()Copy the code

Grammar:

// Equivalent to element.scrollintoView (true) element.scrollIntoView(); // Boolean arguments //trueThe top of the element will be aligned with the top of the visible area of the scroll area it is in.falseThe bottom of the element aligns with the bottom of the visual area of the scroll area it is in. // object: // {// behavior:"auto"(the default) |"instant" | "smooth"(slow), // block:"start" | "end", // } element.scrollIntoView(scrollIntoViewOptions); // Object parametersCopy the code

4.quadra kill

At present, the basic anchor function has been realized. Click menu to jump to the corresponding content

But it still looks a little stiff. Whew, it’s over in a flash, so add a gentle lift to improve the user experience.

Add a line inside the style of the div you want to scroll.

scroll-behavior: smooth; // Scroll slowly

5.penta kill

At this point, a complete anchor point slowly rolling completed, go to try it!!