Anchor links

[thenajsays]

how do i make these scroll smoothly instead of "jumping" to the anchor... also, how do i jump to a DIV using the ID in IE?

[jscheuer1]

That's really two separate questions. As to the first, you would need javascript, Google:

Smooth Scroll

As to the second, just put an named anchor link in it instead. But if you must use id, you could use a javascript method for that:


document.getElementById('id').scrollIntoView();

But it wouldn't be any smoother than a named anchor jump, and only active if the user had javascript enabled.

[thenajsays]

Thank you so much... one more thing... im very very new to javascript... how/where would i add the "document.getElementByID" code?

[jscheuer1]

There are many places you could use such a code snippet. One would be with a link like:


<a href="#foot"
onclick="document.getElementById('footer').scrollIntoView();return false;"
>Credits</a>

that would be somewhere far enough above an element like:


<div id="footer"><a name="foot"></a>
Brought to you by your friends at this web site.
</div>

so that the footer element wouldn't already be in view. The named anchor would act as a non-javascript fall-back.

But let me be clear. This will not scroll smoothly to the element, all it really does is avoids having #foot appended to the URL, and in some browsers will avoid the click noise usually associated with a link being clicked, and it will prevent a change in the load status of the page for those browsers that might execute one with a named anchor. But only when javascript is enabled.

For smooth scrolling you would need more elaborate code, which I already gave you a hint on how to find using Google.

[boogyman]

in the anchor tag



<a href="#idToGetTo" onclick="javascript:document.getElementById('idToGetTo').scrollIntoView()">TITLE</a>


I am declaring it this way, because if the user doesn't have javascript enabled, they will still be able to get to the anchor, however those that do have javascript enabled, will get the transitional affect...

not sure if you are aware of the term, but its called backwards compatibility :)

[thenajsays]

that worked like a charm...
i tried smooth scroll but it didnt work... i forgot to mention the site is horizontal scrolling

[thenajsays]

i have the site up here (http://www.equusdev.com) (http://www.equusdev.com)

[jscheuer1]

in the anchor tag



<a href="#idToGetTo" onclick="javascript:document.getElementById('idToGetTo').scrollIntoView()">TITLE</a>


I am declaring it this way, because if the user doesn't have javascript enabled, they will still be able to get to the anchor, however those that do have javascript enabled, will get the transitional affect...

not sure if you are aware of the term, but its called backwards compatibility :)

You will almost, probably never target the position an element by its id on a page without javascript. You can target a named anchor (the a tag) though. People often get the two confused - names and ids. Some browsers may use them interchangeably in some cases, but when they do, it's non-standard.

Scripts that scroll to elements by their id are all fine and good as far as they go. But unless there is a named anchor referenced in the href, there will be no reliable non-javascript fall back.

[jscheuer1]

May i have a personal question? counld u sent me your email address?My email is [email link removed], thx, man.

You really don't want to post your email address in open forum. The spam bots will have you for dinner.