# Solved: How do I stop a web page from scrolling to the top when a link is clicked



## Mr.LLB (May 27, 2008)

*Hey guys,*

*How do I stop a web page from scrolling to the top when a link is clicked that triggers javascript?*

I have content that is loaded through ajax. But the page keeps on going to the top each time the link is clicked. It's kind of annoying.

Thanks,


----------



## andythepandy (Jul 2, 2006)

Is the href for your link "#"? If so, that'd make it jump to the top.
You can do this to stop that happening:

```
<a href="#" onclick="javascriptFunction();return false;">click here</a>
```


----------



## Mr.LLB (May 27, 2008)

doesent seem to be working

here is the code:

[TD]); return false;">[/TD]


----------



## andythepandy (Jul 2, 2006)

Well, it works for me. It jumps to the top where theres an error in the javascript. What is <?=$ppid;?> meant to be returning?


----------



## Mr.LLB (May 27, 2008)

$ppid is a product ID.

the function is to load the product of that ID using ajax. This is all working fine. But everytime you click on the link, the page scrolls to the top. I don't want that. That's what i want to stop.


----------



## ehymel (Aug 12, 2007)

Have you tried in different browsers? Could be some differences there.

I would drop the "javascript:" portion of your onclick command, i.e. change to this:


```
<a href="#" onclick="loadProduct(<?=$ppid;?>); return false;">
```
Not sure it will help, but worth a shot. This definitely works. You could alternatively switch from using <a href> to something like or a button. The onclick directive works just as well with either of them, and the browser won't try and reload the page to your new link ('#').


----------



## Mr.LLB (May 27, 2008)

I tried both of your methods.

The span tag does the same thing. Even though the content is being loaded through ajax, i don't know why the page goes to the top each time the link is clicked.

hm.....

heres a link to the page: http://imgimports.com/new/products.php?refer=tellafriend&pid=100

if you click on the arrows, only the product should load....

see for yourself. maybe i am doing something wrong.


----------



## andythepandy (Jul 2, 2006)

Do you find that it jumps nearly all the way to the top, but not quite at the top - that's what happens when I do it?

I was looking and I think this happens because when the readystate is 2, you put the loading image there which shrinks the height of the page, forcing it to scoll up, then when the content loads the page gets larger in height again. I found that giving the div products_page_content a constant height in CSS eliminated the problem.

I don't know if that is an option here as maybe each product loaded might have different heights so making the container have a constant height may cause some content to overflow, anyway hope it helps


----------



## Mr.LLB (May 27, 2008)

that fixes it. 

i just gave that div tag a min-height. so it can expand if it needs to.

thx for all ur help both of you.


----------

