9

add a hash to url without scrolling page? with javascript

  1. i open page
  2. i scroll down
  3. i click link that adds a hash (maybe with a value #test) (example: http://www.example.com/#test)
  4. the page MUST not scroll back to the top.

how can this be done?

note: just checking if it's possible to disable the movement even if there is some tag with id="test" so far the return false; works fine (to support people without javascript), and also to avoid the presence of the id's in the html, but it is not a problem with things like numbers, like 1, 2, 3 (they are not allowed as id's anyway)

all the answers are great, nothing new or groundbreaking, and no solutions on how to break the default functionality, but it will do. :) thank you for taking the time to answer.

Timo Huovinen
  • 53,325
  • 33
  • 152
  • 143
  • 1
    "#" has a real semantic meaning which is "the #identified section of the resource at this URI". Why are you trying to break this standard expectation? – annakata Sep 17 '09 at 16:39
  • history and the back button. I personally prefer to do it the classical standards based way but lots of people want fancy ajax. after (or while) I posted this question google and deviant art implemented this "broken" method as you can see when you search for something :) – Timo Huovinen Sep 15 '10 at 11:34
  • right now the new best way of doing this fancy ajax page loading stuff is to use [history.push](https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history) – Timo Huovinen Aug 30 '12 at 08:14
  • Possible duplicate of http://stackoverflow.com/questions/1489624/modifying-document-location-hash-without-page-scrolling. – erdomke Aug 02 '13 at 16:07
  • 1
    @erdomke This question a duplicate? Mine was asked at Sep 17 2009, his was asked Sep 28 2009. His is the duplicate. :) – Timo Huovinen Aug 03 '13 at 20:15
  • @TimoHuovinen Good call. My bad for not checking the dates. My ultimate goal was just to cross-reference the two questions. – erdomke Aug 04 '13 at 01:50

4 Answers4

17

Any hash that isn't present on the page should give you this behaviour. For example, this link points to a non-existant hash on this page. (Link tested with Chrome 2.0 and IE 6 (the only browsers I have available to me at the moment).)

So if your URL is causing you to go to the top of the page, make sure you have nothing on the page whose id or name is that address.

Community
  • 1
  • 1
Welbog
  • 59,154
  • 9
  • 110
  • 123
4

Either of the examples below should do what you want:

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<a href="pleaseEnableJS.html"
    onclick="window.location.hash = '#test1';return false;">Test 1</a>
<a href="#test2">Test 2</a>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

If there is any element with id="test1" or id="test2" or <a name="test1"></a> or <a name="test2"></a> on your page, it will scroll to that element, otherwise it should work as you requested.

If you have code that is not working as expected, please edit your question and include a small example of the HTML and JavaScript that isn't working as expected.

Community
  • 1
  • 1
Grant Wagner
  • 25,263
  • 7
  • 54
  • 64
0

Welbog's answer works fine, but leaves the #nonexistantanchor hash in the browser's address bar.

To do this with jQuery you can add a class to the anchor, and use the prevent default method to disable both the navigation and the change to the url.

<a href='#' class="nodefault">Clickable</a>

<script>
$("a.nodefault").click(function(event) {
  event.preventDefault();
});
</script>

Of course, the aesthetic dilemma is now over whether an elegant url or a javascript-free solution is preferred.

nimasmi
  • 3,978
  • 1
  • 25
  • 41
0

Every browser will interpret the hash value as "go to that DOM ID". You could try two things I can think of:

  1. Make the action that adds the hash to return false, thus disabling the need of the browser to look it up

  2. Add a DOM tag with the ID of the hash you are adding right where the click is, to stop the browser to move. But probably this isn't what you want, since you are adding the hash for something.

Alessandra Pereyra
  • 2,640
  • 18
  • 22