Smooth scrolling with javascript...

TheRoper · 06-08-2004, 06:53 AM

hi folks -

i kinda figured i'd find something just by running a google, but no such luck... what i have is basically a "current events/newsletter" page with a few links at top... i need each link to "smoothly scroll" down the page and stop at a given point (ie LINK 1 scrolls down to CURRENT EVENT 1, LINK 2 scrolls down to CURRENT EVENT 2, etc...) after each "current event" thing there is a "top of page" link that i would like to simply scroll smoothly back to the top. i'm pretty sure you guys know what i mean

my problem is that i can't get it to stop scrolling at all, much less at a specific point... any help is much appreciated... thanks!

this is really all i have so far:

*********************************
<HTML>
<HEAD>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript"></SCRIPT>

</HEAD>

<BODY>
<a href="top()">top of page</a>
</BODY>
</HTML>
*********************************

thanks again...

glenngv · 06-08-2004, 07:35 AM

Code:

var t;
function top() {
  if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
    window.scrollBy(0,-50);
    t=setTimeout('top()',10);
  }
  else clearTimeout(t);
}
...
<a href="#" onclick="top();return false">top of page</a>

TheRoper · 06-08-2004, 07:48 AM

thanks for the reply glenn,

that code works perfectly for the "top of page" dealy

... i was wondering if maybe you knew how i could get the other links to scroll down to a certain point and then stop... thanks.... also, is the solution you gave me cross-browser friendly?

thanks again...

glenngv · 06-08-2004, 08:19 AM

Quote:

Originally Posted by TheRoper

thanks for the reply glenn,

that code works perfectly for the "top of page" dealy

... i was wondering if maybe you knew how i could get the other links to scroll down to a certain point and then stop... thanks.... also, is the solution you gave me cross-browser friendly?

thanks again...

AFAIK, it is cross-browser. And it will degrade well if javascript is disabled as the page will still go to top. That is because of href="#".

Regarding your other question..

<a href="#c2">go to Content 2</a>
...
...
<a name="c2"></a>
<h1>Content 2</h1>
...

You can't incorporate the javascript solution earlier as you don't know the coordinates of a particular section.

TheRoper · 06-08-2004, 08:41 AM

hey glenn -

i appreciate the replies... i was originally using named anchors, but ended up wanting to use javascript because if a user clicks on a named anchor, then on 'top of page', and then hits their 'back' button, it goes to the anchor (know what i mean?) anyways, suppose i do know the coordinates of a particular section... when i first tried using javascript to scroll, i ended up trying:

<a href="#" onClick="javascript:scroll(0,450);return false;">scroll to 450</a>

which works fine, but i want it to scroll smoothly... any suggestions?
thanks...

glenngv · 06-08-2004, 09:17 AM

Try this. Not tested though.

Code:

var t;
var currentYPos;
function bottom(targetYPos) {
  var y1 = document.body.scrollTop;
  var y2 = document.documentElement.scrollTop;
  if ((y1<targetYPos && y1!=0) || (y2<targetYPos && y2!=0)){
    currentYPos = (y1==0 && y2!=0) ? y2 : y;
    window.scrollBy(0,currentYPos+50);
    t=setTimeout('bottom('+targetYPos+')',10);
  }
  else clearTimeout(t);
}
...
<a href="#c2" onclick="bottom(450);return false">go to Content 2</a>
...
...
<a name="c2"></a>
<h1>Content 2</h1>
...

Retain the named anchor solution for backward compatibility.

TheRoper · 06-09-2004, 02:23 AM

didn't work...
i kind of get what you're going for, but it's a little over my head...
now, if the window is at the top, nothing happens... and if the window is anywhere scrolled within the page besides at the top, i get an error 'y' is undefined in this line:

currentYPos = (y1==0 && y2!=0) ? y2 : y;

any other suggestions... anyone?

thanks...

glenngv · 06-09-2004, 03:57 AM

I had a typo there, it should be y1. You should have guessed that, I have no y variable anywhere.

Here's the modified code that includes the fix for the "window-at-top" bug.

Code:

var t;
var currentYPos;
function bottom(targetYPos) {
  var y1 = document.body.scrollTop;
  var y2 = document.documentElement.scrollTop;
  if ((y1<targetYPos && y1!=0) || (y2<targetYPos && y2!=0) || !currentYPos){
    currentYPos = (y1==0 && y2!=0) ? y2 : y1;
    window.scrollBy(0,currentYPos+50);
    t=setTimeout('bottom('+targetYPos+')',10);
  }
  else clearTimeout(t);
}
...
<a href="#c2" onclick="currentYPos=0;bottom(450);return false">go to Content 2</a>
...

TheRoper · 06-09-2004, 06:14 PM

wow, you're right, i totally should have noticed that... did i mention i have A.D.D.

anyway, the modified code works fine, but only once

if you click the link again whilst at the top, nothing happens... if scrolled anywhere, it works kind of, but only scrolls down part way...

here is a mock page so you can see what i mean...

i appreciate all your help, thanks again...

TheRoper · 06-10-2004, 02:33 AM

anybody?...

glenngv · 06-10-2004, 02:44 AM

You didn't notice the resetting of currentYPos in the onclick handler in my suggested code:

Quote:

Originally Posted by glenngv

Code:

<a href="#c2" onclick="currentYPos=0;bottom(450);return false">go to Content 2</a>

TheRoper · 06-10-2004, 03:21 AM

thanks for putting up with my newbie-ness glenn... it works just fine now...

i appreciate all the help...
cheers, mate!

glenngv · 06-11-2004, 10:17 AM

You're welcome.

But I found a simpler solution.

Code:

var t;
function bottom(targetYPos) {
    var y = document[getDocElName()].scrollTop;
    if (y<targetYPos){
        window.scrollBy(0,50);
        t=setTimeout('bottom('+targetYPos+')',10);
    }
    else clearTimeout(t);
    return false;
}

function top() {
    var y = document[getDocElName()].scrollTop;
    if (y!=0){
        window.scrollBy(0,-50);
        t=setTimeout('top()',10);
    }
    else clearTimeout(t);
    return false;
}

function getDocElName(){
    if(document.compatMode && document.compatMode == "CSS1Compat"){
        return "documentElement";
    }
    else{
        return "body";
    }
}
...
<a href="#c2" onclick="return bottom(450)">go to Content 2</a>
...
...
<a href="#" onclick="return top()">go to top</a>

goughy000 · 11-19-2005, 08:34 PM

is it possible to do this vertical AND horizontal?

glenngv · 11-24-2005, 05:31 AM

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
var timer = 0;
var delay = 10; //msec
var scrollOffset = 5; //pixel
var docBody;

function init(){
	docBody = document[getDocElName()];
}

function goDown(targetYPos) {
    var y = docBody.scrollTop;
    if (y<targetYPos){
        window.scrollBy(0, scrollOffset);
        timer = setTimeout('goDown('+targetYPos+')', delay);
    }
    else clearTimeout(timer);
    return false;
}

function goUp(targetYPos) {
    var y = docBody.scrollTop;
    if (y>targetYPos){
        window.scrollBy(0, -scrollOffset);
        timer = setTimeout('goUp('+targetYPos+')', delay);
    }
    else clearTimeout(timer);
    return false;
}

function goRight(targetXPos) {
    var x = docBody.scrollLeft;
    if (x<targetXPos){
        window.scrollBy(scrollOffset, 0);
        timer = setTimeout('goRight('+targetXPos+')', delay);
    }
    else clearTimeout(timer);
    return false;
}

function goLeft(targetXPos) {
    var x = docBody.scrollLeft;
    if (x>targetXPos){
        window.scrollBy(-scrollOffset, 0);
        timer = setTimeout('goLeft('+targetXPos+')', delay);
    }
    else clearTimeout(timer);
    return false;
}

function getDocElName(){
    return (document.compatMode && document.compatMode == "CSS1Compat") ? "documentElement" : "body";
}
</script>
</head>
<body onload="init();">
<a href="#test1" onclick="return goDown(300)">go to test 1 (Down)</a>
<pre>
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
<a name="test1"></a>test 1
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
<a name="test3"></a>test test test test test <a name="test2"></a>test 2 test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</pre>
<a href="#test1" onclick="return goUp(300)">go to test 1 (Up)</a>
<a href="#test2" onclick="return goRight(200)">go to test 2 (Right)</a>
<a href="#test3" onclick="return goLeft(0)">go to leftmost (Left)</a>
<a href="#" onclick="return goUp(0)">go to top (Up)</a>
</body>
</html>