0

I am trying to add a scroll function to my landing page so that when the navi bar link is clicked, it smoothly scrolls to the section. instead of CSS, I should use JS, 'addEventListener','preventDefault' and ''scrollIntoView() to achieve this. I've been trying and trying for days, it just dosen't work, please help me!

here is my my CodePen link:

https://codepen.io/Qinisfighting/pen/bGYKEGe

Qin
  • 23
  • 5
  • When i click on section1 it goes to section 1 , seame for 2,3 and 4. So whats not working? – Grumpy Mar 15 '22 at 10:22
  • it has to smooth scroll to section, but not jump to...... – Qin Mar 15 '22 at 10:25
  • Please go read [ask] and [mre]. The minimal code necessary to reprodcude your problem, belongs _directly_ into your question, and not just dumped onto an external platform like codepen. – CBroe Mar 15 '22 at 10:31
  • sorry! I'll do it right next time! – Qin Mar 15 '22 at 21:11

2 Answers2

1

I rewrote the code that you commented, but also changed a major part when you created the menu links.

const clickItems =  document.querySelectorAll('.menu__link');

for (const clickItem of clickItems) {
      clickItem.addEventListener("click", function(e){
        e.preventDefault();
        document.querySelector(e.currentTarget.dataset.href).scrollIntoView({behavior: "smooth"});
    });
  }

The main difference is that I changed your href attribute in the menu links into a data-href attribute, otherwise the native behavior would scroll down to your sections, just like any link would do.

navList += `<li id="${sectionName}"> <a class="navbar__menu menu__link" data-href="#${section.id}">${sectionName}</a></li>`;
Rickard Elimää
  • 6,469
  • 3
  • 13
  • 28
  • Hi! just found out the click and scroll works in CodePen view fine, but not in chrome... – Qin Mar 15 '22 at 11:02
  • Sorry, but I need more debugging information than "not in Chrome". Do some console.logs on the right places, check any error messages, or add breakpoints and really debug your own code. – Rickard Elimää Mar 15 '22 at 16:03
  • Hi, thank you for your time and sorry that I didn't give enough information. I did the two changes in CodePen als you told me, and the scroll function works perfectly, as well as other functions , then I copied and pasted the same code from CodePen in VS code , saved locally and opened the page with browser(chrome and Firefox), but when I click the navi menu, it doesn't react at all, neither jump nor scroll to the section. when i change data-href back to href and delete the scroll function code, it works again like before(click and jump to the section). – Qin Mar 15 '22 at 21:09
  • I try to debug with chrome developer tool but couldn't find out anything. I don't undertand why the code with your changes works perfectly in CodePen, but not in browser... – Qin Mar 15 '22 at 21:09
  • Is it possible that the script executes before the HTML have loaded into the DOM. Will it return an empty array (really: node list) if you do a `console.log(clickItems)` after clickItems have been declared? That's the only thing I can think of. – Rickard Elimää Mar 15 '22 at 22:44
0

You can search for the element and move directly

document.getElementById("myElement").scrollIntoView();

"behavior" Defines the transition animation. One of auto or smooth. Defaults to auto.

Post: How do I scroll to an element using JavaScript?

Rimander
  • 116
  • 10