Coder Perfect

How can I prevent a web page from scrolling to the top when a JavaScript link is clicked?

Problem

When I have a jQuery or JavaScript event connected to a link, such as:

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

How do I keep the page from scrolling all the way to the top? The page does not scroll to the top when I remove the href property from the anchor, but the link does not appear to be clickable.

Asked by Achilles

Solution #1

You must prevent the click event’s default action (i.e., travelling to the link target) from occuring.

There are two options for accomplishing this.

In the event object supplied to your handler, call the.preventDefault() method. If you’re binding your handlers with jQuery, that event will be a jQuery instance. It will be the jQuery equivalent of.preventDefault (). It will be an Event and the raw DOM version of.preventDefault if you use addEventListener to bind your handlers (). Either way, you’ll get the job done.

Examples:

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

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

In jQuery:

To avoid the normal link behavior, use this approach:

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

Because the HTML 5 spec mandates this behavior, if you use raw DOM events, this will also function on newer browsers. Older versions of the standard didn’t, thus if you want to ensure maximum compatibility with older browsers, you should explicitly call.preventDefault(). For more information, see event.preventDefault() vs. return false (no jQuery).

Answered by Paolo Bergantino

Solution #2

Instead of #, you can use #! as your href.

For example,

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

When clicked, there will be no scrolling.

Beware! When a user clicks your link, it will still add an entry to their browser’s history, which means that the user’s back button will not send them back to the previous page. As a result, it’s usually advisable to utilize the.preventDefault() method, or to combine the two.

Here’s a Fiddle that demonstrates this (scrunch down your browser till you see a scrollbar): http://jsfiddle.net/9dEG7/

The HTML5 spec specifies this behavior in the section Navigating to a fragment identifier. Because this behavior is clearly declared as the way to handle an empty fragment identifier, a link with a href of “#” causes the document to scroll to the top.

Because it bypasses this rule, using a href of “#!” instead works. There’s nothing magic about the exclamation mark – it just makes a convenient fragment identifier because it’s noticeably different to a typical fragid and unlikely to ever match the id or name of an element on your page. We may add nearly anything after the hash; the only fragids that won’t work are the empty string, the word ‘top,’ or strings that match the name or id properties of page components.

In order to determine the suggested part of the document from the fragid, we just need a fragment identification that will cause us to skip to step 8 in the following algorithm:

As long as we get to step 8 and there isn’t an indicated area of the document, we can use the following rule:

As a result, the browser does not scroll.

Answered by Matt Wonlaw

Solution #3

This code can be used in a simple way:

<a href="javascript:void(0);">Link Title</a>

Because this method avoids forcing a page refresh, the scrollbar remains in place. It also allows you to use jQuery to dynamically update the onclick event and handle client-side event binding.

As a result, the above solution is preferable.

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

If and only if the myClickHandler method does not fail, the last approach will avoid the scroll-jump issue.

Answered by phreeskier

Solution #4

You should make a change.

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

to

<a href="javascript:;">My Link</a>

When the link is clicked, the page will not scroll to the top. This is preferable to using href=”#” and then disabling the default event.

Return false; will not execute if the called function throws an error, or you may add return false; to a doSomething() function and then forget to use return doSomething();

Answered by achecopar

Solution #5

Returning false from the code you’re calling will work and is the preferable option in many cases, but you can also do this.

<a href="javascript:;">Link Title</a>

When it comes to SEO, it all boils down to what your link will be used for. If you’re going to use it to link to other content, I agree that something meaningful would be preferable, but if you’re just using it for utility, like Stack Overflow does with the post toolbar (bold, italic, hyperlink, etc. ), it probably doesn’t matter.

Answered by Dean

Post is based on https://stackoverflow.com/questions/1601933/how-do-i-stop-a-web-page-from-scrolling-to-the-top-when-a-link-is-clicked-that-t