scrollIntoView(); trouble getting it to work

NOTE: I resolved this with this code ... but how might I stream line this

const homeLink = document.getElementById('homeLink');
homeLink.onclick = function(e) {
  e.preventDefault();
  document.querySelector('#home').scrollIntoView({block: 'start', behavior: 'smooth'});
}
const servLink = document.getElementById('servicesLink');
servLink.onclick = function(e) {
  e.preventDefault();
  document.querySelector('#services').scrollIntoView({block: 'start', behavior: 'smooth'});
}
const teamLink = document.getElementById('teamLink');
teamLink.onclick = function(e) {
  e.preventDefault();
  document.querySelector('#team').scrollIntoView({block: 'start', behavior: 'smooth'});
}
const conLink = document.getElementById('contactLink');
conLink.onclick = function(e) {
  e.preventDefault();
  document.querySelector('#contact').scrollIntoView({block: 'start', behavior: 'smooth'});
}

Instead of repeating the functions over and over how
might I write one function that could be called by the anchor onclick events?

If you are using jquery I would do something like this

<a id="contactLink" data-link="contact"></a>

$("A[data-link]").on("click" , (function(e) {
   var targetData = $(this).attr("data-link");
   document.querySelector('#' + targetData).scrollIntoView({block: 'start', behavior: 'smooth'}
});

Select allOpen in new window

Dont know jquery but that looked interesting

That said adding the onclick to the link is doable
I am creating the links using a Template Literal
let myEl = ['home', 'services', 'team', 'contact'];
// ******* Parse the Array and get all ID names *********
// Use Template Literal to create li then place it in UL
let output = myEl.map((id) => {
  return `
            <li><a href='#${id}' id='${id}Link'>${id}</a></li>
         `;
});

// ******* Used .join('') on output to remove the trailing commas
document.getElementById('mylist').innerHTML = output.join('');


I can adjust the template to include the onclick as you merntioned ... see how that works :) Ill let you know

Ok this not turning out as easy as I thought here is whats happening

let output = myEl.map((id) => {
  return `
            <li><a id='${id}Link' onClick='document.querySelector('#${id}').scrollIntoView({block: 'start', behavior: 'smooth'}); return false;' >${id}</a></li>
         `;
});

The results are
  <a id="homeLink" onclick="document.querySelector(" #home').scrollintoview({block:="" 'start',="" behavior:="" 'smooth'});="" return="" false;'="">home</a>

As you can see its adding      =""  <----- so ofcourse its not working .... never had Template Literal do that before ..... any thoughts what I could do to fix it?

forgot to mention  M getting this error
SyntaxError: expected expression, got '}'

Im not seeing it though

Thank you that was the answer ... I figured out how to create the link with the onClick as you showed it ... works like a charm

I used template literal
let output = myEl.map(({id}) => {
  return `
            <li><a id='${id}Link' onClick="document.querySelector('#${id}').scrollIntoView({block:'start',behavior:'smooth'});return false;" >${id}</a></li>
           
         `;
});
got it done ..... Thanx

Based on the lack of animation in the original question, may I ask why not just

document.getElementById('mylist').innerHTML = myEl.map(id => `<li><a id='${id}Link' href='#${id}'>${id}</a></li>`).join('');

Select allOpen in new window

or even without the ID if you do not need it

document.getElementById('mylist').innerHTML = myEl.map(id => `<li><a href='#${id}'>${id}</a></li>`).join('');

Select allOpen in new window