Make Internal Links Scroll Smoothly with JavaScript

This is a dedicated thread for discussing the SitePoint article ‘Make Internal Links Scroll Smoothly with JavaScript

There should be a live example for us to try before we sit down and wade through this to implement it. I want to see how well it works and performs.

It would be nice if the script worked for XHTML internal links, where the link can jump to any element by its id.

Wouldn’t be too difficult to add, either.

Where is an online sample ???

Nice code. To make the scrolling ease-out, change the ss_scrollWindow-function to this:

var idx = 0;
function ss_scrollWindow(srcy,desty,anchor) {
// use 0 - pi/2 of sine curve to scroll
var y = srcy+(Math.sin((idx/ss_STEPS)0.5Math.PI)*(desty-srcy));
window.scrollTo(0, y);
idx++;
if (idx == ss_STEPS) {
window.scrollTo(0,desty);
// cancel the repeating timer
clearInterval(ss_INTERVAL);
// and jump to the link directly so the URL’s right
location.hash = anchor;
idx = 0;
}
}

Then alter the call in the smoothScroll to:

ss_INTERVAL = setInterval(‘ss_scrollWindow(’+cypos+‘,’+desty+‘,"’+anchor+‘")’,10);

Aparently there’s something different in Mozilla 1.5: you have to change the condition in the ss_fixAllLinks-function, and add a check for ‘lnk.href’, to see if it exists.

Also, to add ease-out functionality, change the call to setInterval in the ss_smoothScroll function to:

ss_INTERVAL = setInterval(‘ss_scrollWindow(’+cypos+‘,’+desty+‘,"’+anchor+‘")’,10);

And replace the ss_scrollWindow function with this:

var idx = 0;
function ss_scrollWindow(srcy,desty,anchor) {
window.scrollTo(0, srcy+Math.round(Math.sin(((idx++)/ss_STEPS)0.5Math.PI)*(desty-srcy)));
if (idx == ss_STEPS) {
window.scrollTo(0,desty);
clearInterval(ss_INTERVAL);
location.hash = anchor;
idx = 0;
}
}

Have fun!

Aparently there’s something different in Mozilla 1.5: you have to change the condition in the ss_fixAllLinks-function, and add a check for ‘lnk.href’, to see if it exists. Without it, the smoothscrolling won’t work in the latest Mozilla.

Also, to add ease-out functionality, change the call to setInterval in the ss_smoothScroll function to:


  [font=Courier New][color=DimGray] ss_INTERVAL = setInterval('ss_scrollWindow('+cypos+','+desty+',"'+anchor+'")',10);[/color][/font]
  

And replace the ss_scrollWindow function with this:

[font=Courier New][color=DimGray]


 var idx = 0;
  function ss_scrollWindow(srcy,desty,anchor) {
    window.scrollTo(0,     srcy+Math.round(Math.sin(((idx++)/ss_STEPS)*0.5*Math.PI)*(desty-srcy)));
	if (idx == ss_STEPS) {
		window.scrollTo(0,desty);
		clearInterval(ss_INTERVAL);
		location.hash = anchor;
		idx = 0;
	}
  }
  [/color][/font]

Have fun!

A nice way to get something more on your web site. Crossbrowserfriendly and easy to integrate.

Scrolling doesn’t seem to work for me on Mac OS 10.2.8 using IE 5.2, or recent versions of Mozilla or Safari…

Jeff
jeff@jeffnye.com

Great effect, but for a ‘newbie’ as myself, a final “put the smoothscroll.js file in the folder, and only code to add in your page is …” would have helped.

I love it! It’s the small attention to detail that give a site its professional edge. This sweet script helps the user understand the relationship between the link and the bookmark. Very clever!

It works fine except for the “top” links. any ideas why?

It works! - and is now a part of MY web site! (I have no problems with the “RETURN TO TOP” links - they work fine, also.)

Moved to the JavaScript Forum

Would be nice to see a working demo of all the tutorials… nothing worse than not being able to see what it does before you spend a lot of time coding it…

After hours of trying to find a script like this, stumbling over this one was such a relief… i was so happy to see it - the only thing i wanted, was to have it scroll horiztonally, instead of vertically :confused:

is anyone able to help me make it so it scrolls hortizonally?

Ive set up a page where it has vertical and horiztonal places to go (ie a piece of text really far down, and then one really far to the right) to test it out… the one down the bottom gets scrolled to without a problem, but i cant make it scroll to the right…

also, is it possible to make it so it scrolls to things like images, instead of just text?

i hate it to say it, but i know nothing about javascript really… i can look at it a little, and understand (even if only slightly) whats going on, but tahts about it…

any help would be greatly apreciated it, thanks

This works really great!
I implemented it on my site too. However, it is also possible to use any other element as target using an id attribute. To make this work, replace the code block starting with
// Find the <a name> tag corresponding to this href
with this line of code (or just add it):
destinationLink = document.getElementById( anchor );

Is it possible to catch the ‘back’ button call and send the user to hist last position?

If you want to use any tag as targets (<div id=“banner”>), replace

// Now loop all A tags until we find one with that name
	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;
		}
	}/

with

destinationLink = document.getElementById( anchor );

Sadly, the script does not (neither FireFox nor IE6) work with image links like

<a href="#top"><img src="up.gif /></a>

Anyone have a remedy?

// – edit –
Ah, I see my post from the article’s form has made it this far also! 8 )

To make the script work with anchors that contain another element (like the IMG inside A problem above):

Replace the code…

// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != ‘a’) return;

…with this code:

// Find the triggering anchor
while (target.nodeName.toLowerCase() != ‘a’) {
target = target.parentNode;
}

Cheers! Great piece of code!

doesn’t seem to work with Mac OS X on Safari or IE 5.2, but does with NN7. Any ideas why?

This could be useful for an effect I was trying to create. Would like to have a fixed size div and have to text scroll within that div rather than scroll to a different position on the page when an internal link is clicked.Anyone know how to do this?