Make Internal Links Scroll Smoothly with JavaScript

I dont know i may have missed it but does someone have a link that demonstrates this script. If you do please write to me at juliomanson@aol.com and write “internal links scroller” in the subject line so that your mail isnt mistaken for spam. Thank you very much. I am looking forward to seeing your responses.

Sincerely,

Julio Manson

To make this script works with any destination element with an id attribute… not necessarely an anchor… just replace

var allLinks = document.getElementsByTagName(‘a’);
var destinationLink = null;
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk;
break;
}
for:

destinationLink = getObjById(anchor);

and getObjById is a x-browser function for referring to an object:
function getObjById(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
}
else if (document.all)
{
this.obj = document.all[name];
}
else if (document.layers)
{
this.obj = document.layers[name];
}
return this.obj;
}

Sorry, that was posted… I just saw the last three messages on the article’s page…

How can I adapt this script to smoothscroll to website sections along the X axes and not the Y?

The code is brilliant, and worked perfectly when scrolling down the page, but i want to scroll across instead.

cheers

This doesn’t work in Safari 1.3. When you click a link, it scrolls all the way to the bottom then reloads the page and then lands at the intended anchor. Same thing happens in OmniWeb 4.5 and 5.1 but without the scrolling.

Thanks for the great article! One quick note:

It’s a little more efficient in JavaScript (and pretty much any language) to calculate lengths outside of the for loop. like this:

var myLength = allLinks.length;

then inside the for loop do:

for (var i=0;i<myLength;i++) {

This is more efficient because the script doesn’t have to re-calculate or count the length each time through the loop.

More tips like this can be found (on occasion) here:
http://www.codedump.com/
:slight_smile:

Again, thanks for the great write up – I’ll be using this one right away.

How could I make a link in the document loaded into the iframe, that would scroll the window to the right (some sort of a “next” link). I triend using top.location.href, but it doesn’t work…

Any suggestions?

Doesn’t work.

Im curious if it would be possible to make this work from within a flash menu…

Would it be possible to do the animation apon the page opening.

How about the link host.com/?page=test in opera? it goes back to scrolling like browser default. host.com/?page=test#top does not work.

Hi!

There is a way to scroll the page horizontaly?

I couldn’t get the code to work… in Firefox it wouldn’t even jump or scroll to my link and on ie it jumps.

Then it’s probably just an error in your installation. URL?

This won’t be the problem, but anchors should not be empty, i.e.

<a name=‘myAnchor’></a>

otherwise Safari will not report their displacement properly. There should always be at least one non-whitespace character between the tags:

<a name=‘myAnchor’> </a>

I’m not certain that this is technically a bug, but I reported it recently.

Great article… The code is way over my head by the effect is what I’m looking for and it works great on Opera and Firefox.

One thing, is there anyway to slow the scroll as the window approaches the div? Rather than scrolling at a constant speed, I’d like the effect to behave more like the movement of a train ‘pulling in’ and ‘out’ of a station. Is that possible?