2

I have an 'a' link on my website that has a jQuery function attached to it inside my page. This link's 'href' is '#', as the page does not need to reload for my jQuery. However, whenever the link is clicked, it takes you to the top of the page again. This is annoying, as the link is quite far down, so you have to find your reading position again. Is there a way to...

  • Stop the link from taking you back to the top (maybe with JavaScript?)
  • Or have an alternative to '#' that does the same job, but doesn't take you to the top of the page.

2 Answers2

1

href="#" means "Link to the top of the page", so you should definitely be looking for something to use instead of it.

Links go places, and you don't want to go anywhere, so you shouldn't be using a link.

Use a button instead.

<button type="button">Label</button>

This assumes that you absolutely cannot use progressive enhancement so that if the JavaScript fails (which it will) then loading a new page will give the same end result (albeit less efficiently).

If you can use progressive enhancement then you should use a link to something useful:

<a href="/handle/it/on/the/server">Label</a>

and then prevent the default action:

jQuery("a").on("click", handler);

function handler(event) {
    doSomethingWithJS();
    event.preventDefault();
}
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

As an alternative to @Quentin's answer, if you are using links because you want to "go somewhere", but just not a reloaded / new page, use a semantic fragment identifier instead:

body { font-size: 28px; } /* for testing */
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
<p><a href="#my-section">My section</a></p>
Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • 2
    That's a fragment identifier, not a hashtag. A hashtag is an automatically generated link to a set of search results. – Quentin Jan 24 '16 at 12:25