add a hash with javascript to url without scrolling page? - Stack Overflow

admin管理员组

文章数量:1193389

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: )
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.

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.

• javascript
• url
• hash
• scroll

Share Improve this question Follow edited Sep 17, 2009 at 18:36 Timo Huovinen asked Sep 17, 2009 at 16:25 Timo HuovinenTimo Huovinen 55.6k3434 gold badges160160 silver badges149149 bronze badges 6

• 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 Commented Sep 17, 2009 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 Commented Sep 15, 2010 at 11:34
• right now the new best way of doing this fancy ajax page loading stuff is to use history.push – Timo Huovinen Commented Aug 30, 2012 at 8:14
• Possible duplicate of stackoverflow.com/questions/1489624/…. – erdomke Commented Aug 2, 2013 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 Commented Aug 3, 2013 at 20:15

 |  Show 1 more comment

4 Answers 4

Sorted by: Reset to default 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.

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.

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.

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.

本文标签： add a hash with javascript to url without scrolling pageStack Overflow