Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Move page to id using javascript

3:10 am on Mar 2, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Dec 5, 2007
votes: 0

I have a lot of links to different sections id's on one of my web pages.

I'm using the the following format: index.html#hash1, index.html#hash2, etc...

My only complaint is that it changes the address bar to a different (longer) url.

I don't want people to be confused by this, and I don't want people to copy this longer address to link to me by either.

What I would like to do is possibly use javascript on these links, to return false, but for the browser to still move the page down to the right id.

It would graciously default for users who don't have javascript, by working how it's working now.

Is this possible?

11:26 am on Mar 5, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:May 4, 2004
votes: 0

You can put a javascript code into the onclick event handlers for these links, and that code would scroll the page to the right position. To be an easy one, I'd suggest you to assign the same names to the ID attributes as you use in the NAME attributes already, then you only need something like document.getElementById('LinkName').scrollTop (if I'm not mistaken) to get the absolute top position of that anchor.
12:50 am on Mar 6, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 14, 2008
votes: 0

I'm not sure that works in IE 6. You might just have to stick with an anchor NAME, in that case.
2:43 pm on Mar 6, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0

You can get this to work with JS, although you'll have to write a bit more code to get this to work cross browser. Find your current Y position, find the position of your destination element and scrollTo(). With this method you can then animate the scrolling - make it smooth, which can potentially improve accessibility in providing a visual cue as to how far away the link actually is.

Google: "Make Internal Links Scroll Smoothly with JavaScript"

I don't want people to be confused by this, and I don't want people to copy this longer address to link to me by either.

If your hash's are reasonably short (which I suspect they are if they are internal links?) then I'd question whether this would confuse your users? Afterall this is standard browser behaviour. I would have thought that the ability to bookmark parts of a page is a feature since you are already providing a link to it? If I want to direct someone to a particular part of a page I would often view the source and look for a suitable ID to construct the URL - very handy.