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

web-development

responsive-design

event-listeners

fallbacks

byNikita Barsukov·Nov 11, 2024

To prevent the page from scrolling, try:

Using href="javascript:void(0);" to neutralize the link
Invoking event.preventDefault() within the click event handler:

<a href="#" onclick="haultTheJump(event)">No Jump</a>

<script>
function haultTheJump(event) {
  event.preventDefault();
  // Your brilliant JS logic starts here
  // Oh, and remember 'event' is your best buddy in JS land
}
</script>

The key takeaway here is that preventing the link's default action will help preserve the current page position.

Using href to control scrolling

While the esteemed href="javascript:void(0);" effectively quells the scrolling beast, be mindful about SEO repercussions. Given this, utilizing href="!" can mitigate both issues:

<a href="!" onclick="haultTheJump(event)">No Jump</a>

Here, href="!" maintains URL elegance and handles the scrolling affair professionally—not a common approach though.

jQuery and the Return False Brigade

In the magical realm of jQuery, crafting an event handler that returns false not only prevents the default action but also halts event propagation:

$('a').click(function(event) {
  // Unleash the logic monster!
  // Don't feed it after midnight though
  
  return false;  // And this is how we break up with scroll
});

Impact on SEO and Browser History

Whenever you alter links' natural behavior, always pay heed to their impact on your SEO and the browser's history. Techniques like exploiting window.location.hash or wielding the History API broom can fend off the SEO specter while keeping the UX demon at bay.

Keeping Links Clickable and Clean

Preserving aesthetic appeal and clickability is pivotal for nailing user experience. For improved code readability and maintainability, separate the JavaScript logic from HTML using event listeners:

document.querySelector('a.noJump').addEventListener('click', haultTheJump);

Remember to dress your links impressively while maintaining their clickable charm.

Dealing with Older Browser Shenanigans

When conjuring these link tricks, do consider how friendly your magic will be with older browsers. Not all browsers hold the same spellbook, hence, strive to achieve the maximum compatibility and implement some good ol' fallbacks when necessary.

explain-codes / Web development / How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

Linked

Scroll to an element with jQuery



Force page scroll position to top at page refresh in HTML



Scroll to bottom of div?



Html anchor link - href and onclick both?



Event.preventdefault() vs. return false

