how to find the id of the element anchored in a link when user click on the link (JavaScript)

Question

This is a landing page project. it has 5 html sections. it also has a dynamic navigation bar at the top that links the sections. whenever a section is added in the html it is updated on the navigation bar and links you to the section that you clicked on. I want to use JavaScript to add smooth scrolling behavior whenever I click on the sections (like scrollIntoView()) here is the html of a section

let navList = document.querySelector('#navbar__list'); // stores the <ul>...</ul>
let sectionsNumber = document.querySelectorAll('h2');
const makeNavListItems = () => {
  for (let i = 0; i < sectionsNumber.length; i++) {
    listItem = document.createElement('li');
    listItem.innerHTML = ` <a class="menu__link"  href="#section${i+1}"> Section ${i+1} </a>`;

    navList.appendChild(listItem);
  }
};

<!-- HTML Follows BEM naming conventions
          IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
  <nav class="navbar__menu">
    <!-- Navigation starts as empty UL that will be populated with JS -->
    <ul id="navbar__list"> </ul>
  </nav>
</header>
<main>
  <header class="main__hero">
    <h1>Landing Page </h1>
  </header>

  <section id="section1" data-nav="Section 1" class="your-active-class">
    <div class="landing__container">
      <h2>Section 1</h2>
      <p>.....</p>

      <p>.......</p>
    </div>

I must use an event Listener to add this scrolling behavior (project requirement) so i was thinking of something like this

navList.addEventListener('click',function(event){    
 event.preventDefault();
if(event.target.href){document.getElementById().scrollIntoView({behavior:'smooth'})}                                                        })

so this will check if the event target is a link. the problem is I can't find a way to get the id of the element anchored in the link

Inspect `event` and its properties and you should be able to find a suitable element (and the "id" in its `href` attribute) - [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) — Andreas, Aug 20 '22 at 11:09
I'd highly recommend using https://beautifier.io/ to fix your indentation as the first step to solving any problem. It's easy and I think you'll find it really helps. — Rocky Sims, Aug 20 '22 at 11:29
I've edited your post to (try) to make your code a runnable snippet; I'll note that you're missing a closing `` tag in your HTML, but may I ask if this reproduces your problem? If not, could you please [edit] the question, and the snippet, to ensure that it does? — David Thomas, Aug 20 '22 at 11:38

score 0 · Accepted Answer · answered Aug 20 '22 at 11:33

const navList = document.querySelector('#navbar__list');
const sectionsNumber = document.querySelectorAll('h2');
const makeNavListItems = () => {
    for (let i = 0; i < sectionsNumber.length; i++) {
        listItem = document.createElement('li');
        listItem.innerHTML = ` <a class="menu__link"  href="#section${i+1}"> Section ${i+1} </a>`;
        navList.appendChild(listItem);
    }
};
makeNavListItems();

navList.addEventListener('click', function(event) {
    event.preventDefault();
    if (event.target.href) {
  
  
  
        //here we use uditkumar11's idea to get the id (or rather the query string for getting the element with the id)
        const idQueryStr = event.target.getAttribute('href');
        console.log(idQueryStr);
    
    
    
        const targetElem = document.querySelector(idQueryStr);
        targetElem.scrollIntoView({
            behavior: 'smooth'
        });
    }
});

<body>
    <header class="page__header">
        <nav class="navbar__menu">
            <ul id="navbar__list">
            </ul>
        </nav>
    </header>
    <main>
        <header class="main__hero">
            <h1>Landing Page</h1>
        </header>

        <section id="section1" data-nav="Section 1" class="your-active-class">
            <div class="landing__container">
                <h2>Section 1</h2>
                <p>.....</p>

                <p>.......</p>
            </div>
        </section>
    </main>
</body>

Yes your code worked..!! something I don't Understand is why did you console.log the idQueryStr. was that for a debugging purpose? I will check the beautifier.io. Thank you so much — KarimMaged, Aug 20 '22 at 11:49
Yes, `console.log()` is always and only for debugging purposes. I figured it would be easier to follow how it works if the value of `idQueryStr` was visible. — Rocky Sims, Aug 20 '22 at 12:11

how to find the id of the element anchored in a link when user click on the link (JavaScript)

1 Answers1