javascript - Is there a faster method in vue.js to scroll the current interface to a certain part?

Question

For example, commonly used to return to the top, ordinary HTML pages can set the href attribute of the a tag to a certain id, and then scroll the scroll bar to that part when clicked (of course, you can also directly set the scroll bar distance. high).

My current requirement is to click different buttons in the same vue component to scroll the scroll bar to the corresponding part (the scrolling effect is optional). Directly using the above mentioned method will trigger a page jump, but if you directly set the height of the scroll bar, you have to obtain the positions one by one, which is not as simple as the former.

Asking for advice, do you have a better idea for realizing this requirement?

Answer 1

Element.scrollIntoView()

This is a native API of JS. After calling, the browser will scroll to the position of the target element.

https://developer.mozilla.org...

Answer 2

If you can’t use anchor points, you can only get the scroll bar position of each part.

Answer 3

Then you can only use js, as shown below, get the distance between the target element and the top of the page in the event, and then control the scroll axis:

$(window).scrollTop( $("#caaa").offset().top )

Answer 4

From a rough perspective, the anchor point method is definitely violent.

Answer 5

Find a native js plug-in and import it

Answer 6

Same question! I don’t know either

Answer 7

https://huahua0406.github.io/...

There is a corresponding left and right scroll below. Does it meet your requirements?

Answer 8

vue-router2

router has the function of simulating anchor points