SoFunction
Updated on 2025-04-07

vue implements anchor jump scrollIntoView use case

vue implements anchor point jump: scrollIntoView()

illustrate:

Scroll to a specific element: scrollIntoView(); for example, form form or div scroll to the bottom,

('')or('')

After obtaining the element, you can return to the visual area (also understood as back to the top).

Use cases:

<div> v-for="(value,index) in data" class="roll">{{...}}</div>

js part

methods:{
  scrollToPosition(index){
     ('roll')[index].scrollIntoView()
}

In this way, scrollIntoView() is used to simply implement an anchor point jump. Here are some properties in scrollIntoView:

scrollIntoView(true) is equal to scrollIntoView(); the top of the element will be aligned to true with the top of the visible area in the scroll area where it is located. scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value for this parameter.

The bottom end of the scrollIntoView(false) element will be aligned with the bottom end of the visible area in the scroll area where it is located to false. The corresponding scrollIntoViewOptions: {block: "end", inline: "nearest"}.

At the same time, its parameters can also be configured as an object object

  scrollIntoView({
  behavior：auto //Define an animation transition effect one of "auto" or "smooth".  Default is "auto".  block：start//Define the alignment of the vertical direction, one of "start", "center", "end", or "nearest".  Default is "start".  inline:nearest//One of "start", "center", "end", or "nearest".  Default is "nearest".  })

where smooth is the smooth scroll start and end are the positions where the target scrolls to

Note: Compatibility issues Most mainstream browsers already support their basic functions, that is, using the two parameters of true and false to achieve dull positioning (no scrolling animation) is not a problem, but when passing in the object parameters, various versions of IE will be ignored directly, and all are regarded as true parameter attributes. If you want to see scrolling animations, use Firefox and Chrome.

Three ways to jump vue anchor point (in-page jump, cross-page jump, function jump)

1. Requirements

Recently, I encountered a requirement that I needed to jump from one page to another specified anchor point. If it is an anchor point on the page, it is still simple, but that anchor point is in the component of the page. So I studied it a little

2. Basic ways to jump anchor points

2.1 Click to jump within the page

That is, add a tag a, href starts with #, and then add an element where you need to jump, set the id to the same value as the href attribute of the a tag, just don't have #, it's fine. This is the easiest way

&lt;a href="#miao">Go to find the cat star</a>&lt;h3 &gt;Cat Star Base&lt;/h3&gt;

2.2 Jump from page A to page B for the specified anchor point (the anchor point is on the page, not in the child component)

I use vue, so when vue route jumps, just add #anchor point after path. For example, if I want to jump to the anchor point with id miao on page B, then path=xxxx?#miao. When encountering the query parameter, just put #miao at the end of the url, and the same goes for the others. Anyway, just put the anchor point at the end of the url and then jump

 this.$({
            path: `/detail?#miao`,
            query: {
              comment: `${commentId}`
            }
          })

Note: Because the default vue single page uses hash mode, using # as the route segmentation identifier will lead to ambiguity and cannot meet the requirements normally. If you do not want to use history mode, then use the 2.3 method and use the code to jump anchor points.

2.3 Directly use code to jump anchor points

In some cases, you can only use code to jump anchor points, such as jumping from one page to a specified anchor point in a subcomponent on another page. This is different from 2.2. I have tried that if the anchor point is in the subcomponent and is not in the current routing page, then the 2.2 method will not work. Solution:
Use the anchor as a query attribute, or other method, pass the anchor value to page B, and then page B is passed to its child component through props, and finally use code in the child component to jump anchor points

// This is the data passed to the component props: {
      commentId: String
  }
  mounted () {
  // Determine whether commentId has a value. If not, no redirect will be done. I will use 'null' to judge here, you can do whatever you want  // Used to get element, there is a pit, the id value cannot be all numbers, otherwise an error will be reported, so I added id before the id value, and the id format is roughly: id123456  // scrollIntoView is a function used to jump to anchor points        if ( !== 'null') {
          let inter = setInterval(() =&gt; {
            let target = (`#id${}`)
            if (target) {
              clearInterval(time)
              ()
            }
          },100)
        }
    },

This is the article about vue implementing anchor jump scrollIntoView(). For more related contents of vue anchor jump scrollIntoView(), please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!