stop scrolling, damn ye!

May 2, 2007 7:04 AM

Javascript / Prototype problem: I've written a function that inserts new content in a div whenever you click on a link in that same div. It works, but with the added "feature" of scrolling to the top of the page after the new content has been added. I don't want it to do this. How do I stop it? Here's the page. (Scroll down to see the link.)

[script src="prototype.js" type="text/javascript"][/script]

[script]
Event.observe(window,"load",onWindowLoad);

function onWindowLoad()
{
Event.observe("addMoreContent","click",onAddMoreContentClicked);
}

function onAddMoreContentClicked()
{
new Insertion.Bottom("div2","[p]more content[/p]")
scrollTo("div2"); //this line has no effect, but see here.
// $("div2").scollTo //-- doesn't work either
}
[/script]

...

[div] lorem ipsum... [/div] [!-- scrolls to here if you click the link below!! --]

[div id='div2']
[a href="#" id='addMoreContent']add more content[/a]
[/div]

posted by grumblebee to computers & internet (11 comments total)

Have you tried removing the href?
posted by mikeh at 7:09 AM on May 2, 2007

I don't know much about JS (so why am I commenting?) but why is the "add more content" an href? Can you just make it a div or something?
posted by DU at 7:12 AM on May 2, 2007

But without the href, the link isn't clickable.
posted by grumblebee at 7:12 AM on May 2, 2007

add more content is a link. You need something to click to trigger the function that adds the content. (This is for a form that lets you add more text fields if you feel like entering more information.)

I don't think the issue is with the href. The same thing happens if I move the link out of the div.
posted by grumblebee at 7:14 AM on May 2, 2007

I'm very open to be wrong on this, but I'm pretty sure divs can have onclick events.
posted by DU at 7:18 AM on May 2, 2007

Make the href "javascript: ..." code and put "return(false);" on the end.
posted by cmiller at 7:19 AM on May 2, 2007

Just make the href point to "javascript:void(0)". Having it point to an anchor (#) will make it scroll to the top every time.
posted by zempf at 7:23 AM on May 2, 2007

Make the href "javascript: ..." code and put "return(false);" on the end.

Works!!! Thanks cmiller. This will solve my problem. However, I wonder if there's another solution. What if I needed the href to be something else? Also, I have an aversion to inline javascript. I'll include it if I have to, but ... do I have to?
posted by grumblebee at 7:24 AM on May 2, 2007

When you do href="#" that says "go to anchor blank, which is the top of the page. You need to return false; from your onclick so it doesn't run the href.
posted by cmm at 7:25 AM on May 2, 2007

add more content is a link. You need something to click to trigger the function that adds the content. (This is for a form that lets you add more text fields if you feel like entering more information.)

You can add an onclick handler to any element, not just links and buttons. The "#" is a link to an anchor within a page; in this case, since the anchor isn't named, it's going to the top of the page.

It's true that, in most browsers, a elements without an href attribute are formatted oddly — in particular, the cursor won't turn into the pointer cursor when you hover over it. You can force this to happen anyway with the cursor property in CSS.

Also, as cmiller said, making the onclick handler return false should prevent the default behavior (in this case, following the link and scrolling the page). However, I don't use Prototype.js, so I can't say whether the addMoreContent function is actually the onclick handler or whether Prototype does any wrapping behind the scenes.
posted by IshmaelGraves at 7:26 AM on May 2, 2007

grumblebee, I'll bet you can have your event handler return false, and not embed anything in the HTML. I don't know if this is actually true -- I'm just speaking as if I had designed it, which is often radically different/wrong when it comes to javascript/DOM/Web things.
posted by cmiller at 6:27 AM on May 4, 2007