How To Overwrite Anchor Element's Href Target And Remove Other Bugs In My Click-to-go-to-target Javascript?

I've made a webpage. I want to implimenet the feature which scrolls the webpage to the location of href target of menu anchors. My code is as following As such the code doesn't do

Solution 1:

Use preventDefault() on the event, to stop the default for the click event to be executed.

window.addEventListener('scroll', function(e) {
    e.preventDefault();
    ...

Then do your thing in your handler, and at the end, manually update the window.location with the value of the event target's href attribute.

EDIT

RE the comment: your event still bubbles, only the default action is prevented. To stop it from bubbling up, there is event.stopPropagation().

The default action for you event is simply to set the window.location to the value of your event target's href attribute

window.location = e.target.getAttribute('href');