How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

This was a challenge to me at first but when I did some backtest and scan through my entire codes i was able to get the required result I needed when I clicked on the link, and since I have been able to deal with this problem,I wont want you to pass through the stress that I had to pass, all you need to do is to follow the procedure below.

You need to prevent the default action for the click event (i.e. navigating to the link target) from occurring

There are two ways to do this.

FIrst of all the HTML:

<a href="#">My Link</a>

Option 1: event.preventDefault()

Call the .preventDefault() method of the event object passed to your handler. If you’re using jQuery to bind your handlers, that event will be an instance of jQuery.Event and it will be the jQuery version of .preventDefault(). If you’re using addEventListener to bind your handlers, it will be an Event and the raw DOM version of .preventDefault(). Either way will do what you need.

Below is the Examples:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

Option 2: return false;

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault()

So, with jQuery, you can alternatively use this approach to prevent the default link behaviour:

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

If you’re using raw DOM events, this will also work on modern browsers, since the HTML 5 spec dictates this behaviour. However, older versions of the spec did not, so if you need maximum compatibility with older browsers, you should call .preventDefault() explicitly.

i hope this was helpful, and you where able to achieve the result you needed.