Examples of two implementation methods for vue3 anchor point positioning

Method 1: Use ref to achieve anchor positioning. The previous nonsense literature

When it comes to anchor point positioning, many people will think of a tag at the first time. However, the anchor positioning implemented by the a tag is not so perfect, especially in hash mode.
For me, the ref of vue3 is really perfect.

How to solve the problem

In many cases, we will cycle through data in a certain format to render the page, and then have the need to position the anchor point. So how should we do it?

1. Define variables in the setup function

const eleRefs = ref([]);
const setRef = (el) =&gt; {
  if (el) {
    (el);
  }
};
//Get the variable value([0])

2. Dynamically obtain refs and store them in the eleRefs array

 <template v-for="(item, index) in ">
      <div class="part-cont" : :ref="setRef">
        <div class="part-box">
          <template v-for="(j, k) in " :key="k">
            <img :src="j" alt="">
          </template>
        </div>
        <template v-for="(i, ind) in ">
          <div : :ref="setRef" class="part-box">
            <template v-for="(j, k) in " :key="k">
              <img :src="j" alt="">
            </template>
          </div>
        </template>
      </div>
    </template>

3. Scroll to a specific ref position

[0].scrollIntoView({ block: 'start', behavior: 'smooth' });

over

Method 2: Use the a tag to achieve anchor point positioning (scrolling response)

The second nonsense literature

After thinking about it, I still want to record the anchor point positioning of the a tag.

Whether it is a PC, mobile, APP, or mini-program, as long as long articles/picture albums, tab switching, etc., there may be a need for anchor point positioning. Our front-end needs to enable clicking the anchor point to position and scrolling the page to respond.

How to solve the problem

1. a tag Position to the specified location

// Anchor	&lt;a href="#site" rel="external nofollow" >Click here to go to the target location</a>// Anchor position	&lt;div &gt;&lt;/div&gt;

2. Scroll response

Listen to scroll events

let currSite =  ||  // // Current scrolling positionlet windowHeight =|| ||   // Viewport height // Get element information let ele = ('site')
 let eleTop =  // The height of the element to the top of the page (head) let eleHeight =   // Element height  let eleBot = eleHeight + eleTop  // The bottom of the element is from the top of the page (tail)/* Determine whether the element is in the visible area:
	 1. The element is embedded with the visual area (both and end are in the visual area)
	 2. The element is embedded with the visual area (the first position is outside the visual area)
	 3. The head of the element is in the visible area and the tail is outside the visible area
 */
if(eleTop &gt;= currSite &amp;&amp;eleTop &lt; currSite + windowHeight || (eleBot  &gt; currSite &amp;&amp;eleBot &lt; currSite + windowHeight) || (eleTop e &lt; currSite &amp;&amp; eleBot &gt; currSite + windowHeight)){
	 // Elements in the visible area}else{
	// The element is not in the visible area}

over

Summarize

This is the end of this article about the two implementation methods of vue3 anchor point positioning. For more related content on vue3 anchor point positioning, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!