Why does page scroll up when href="#" is clicked?

Question

I have a hyper link as such <a href="#" id="someID">Link</a> that i have to scroll down the page to get to. This hyperlink is only there to trigger an Ajax request. When ever i click this hyperlink the page scrolls all the way to the top! How can i fix this? I use # because anything else would reload the page. Am I using it wrong?

EDIT:

Its kind of hard for me to explain what am doing so if you run this you get the same problem that i am facing. Even after returning false.

   <html>
    <head>
    </head>
    <body>
        <a href="#" id="link" style="position:absolute; top:200%;">Link</a>
    </body>
</html>
<script type="text/javascript">
    document.getElementById("link").onmousedown = function(){
        this.style.color="red";
        return false;
    }
</script>

1. Use a proper Doctype 2. You must put `script` elements within the `head` or `body` of a document. — Marcel Korpel, Nov 13 '10 at 17:16

meder omuraliev · Accepted Answer · 2010-11-13T16:45:46.193

7

add a return false; to the event handler assigned:

 el.onclick = function() {
   // do your code
   return false;
 }

Or the arguably more elegant way

function(e) {
   e = e || window.event;
   if ( e.preventDefault ) e.preventDefault()
   else e.returnValue = false;
}

edited Nov 13 '10 at 16:45

answered Nov 13 '10 at 16:35

meder omuraliev

183,342
71
393
434

Should that be mousedown or click? And can you show *ALL* relevant code including the `Obj` reference.. – meder omuraliev Nov 13 '10 at 16:56
Can you get away with using click instead of mousedown? – meder omuraliev Nov 13 '10 at 17:18

score 6 · Answer 2 · edited May 23 '17 at 11:53

6

Have to tried javascript:void(0) in place of #?

Source:

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Edit:

Reason:

It prevents the browser from refreshing or navigating to another page.

http://www.tizag.com/javascriptT/javascriptvoid.php

edited May 23 '17 at 11:53

Community

1
1

answered Nov 13 '10 at 16:37

Evan Mulawski

54,662
15
117
144

I didn't downvote, but did you read the most up-voted answer there? – Marcel Korpel Nov 13 '10 at 16:42

score 4 · Answer 3 · answered Nov 13 '10 at 16:41

4

The browser is trying to move to an anchor named #. There isn't any so it scrolls to the very top. To avoid this behavior do what meder mentioned.

answered Nov 13 '10 at 16:41

cherouvim

31,725
15
104
153

score 1 · Answer 4 · answered Nov 13 '10 at 16:35

1

you need to stop the event propagation when you click the anchor tag.

answered Nov 13 '10 at 16:35

hvgotcodes

118,147
33
203
236

score 0 · Answer 5 · answered Nov 13 '10 at 22:15

The browser is reading the # as an anchor, you ether have a link with an id of "someID" at the top of your page or no ID at all in which case it will just go to the top of the page by default (This seems to be the case for you). You will have to replace the # sign with something to stop this. I'm not sure what would be best, but Evan Mulawski's answer might work. I don't know if this will still allow your ajax code to run properly though.

Why does page scroll up when href="#" is clicked?

EDIT:

5 Answers5