How to define/use "el" in function parameter (vue js)

Question

I am VueJS beginner, so please bear with me.

I need to code to scroll to id element when using “?” in URL. Same effect as this

But I have follow the question with fix format, because this is my assignment. They provided these 2 functions without document.getElementById(Query.query).scrollIntoView({behavior: "smooth" }); . I have completed the result by adding the above code. But I don't know how to separate into 2 functions. And I don't know how to call scrollToHere() with "el" parameter also.

scrollToHere() is not called at other place, so I have to include this function in anchor(), but I have no idea how. What is this "el" for? How do I separate the code? Any guidance would be appreciated.

<div id="scroll_here"></div>

methods: {
    anchor() {
        console.log(Query)  //query: "scroll_here"            
        document.getElementById(Query.query).scrollIntoView({behavior: "smooth" });  
    },
    scrollToHere (el) {
         // CODE HERE
    },
}

Answer 1

The item el in the original answer refers to the HTMLElement which you intend to scroll to.

It is a two two process. First find the element and then scroll towards it.

// Assuming this is the html - <div id="scroll_here"></div>

// 1. Find the element using one of the two ways
const el = document.getElementById('scroll_here');

// or alternately,
const el = document.querySelector('#scroll_here');


// 2. Scroll that element into view.
el.scrollIntoView();

You can use getElementById or querySelector to get the reference of HTML element in the DOM tree.

In your case, you can get the element reference in anchor() method and pass it to scrollToHere() function like:

methods: {
  anchor() {
    // { query: "scroll_here" }
    console.log(Query);
    
    this.scrollToHere(document.getElementById(Query.query));
  },
  scrollToHere(el) {
    el.scrollIntoView({behavior: "smooth" });
  }
}