...

View Full Version : 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"><!--

function top() {
window.scrollBy(0,-50);
setTimeout('top()',10);
}

//--></SCRIPT>

</HEAD>

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

thanks again...

glenngv
06-08-2004, 07:35 AM
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 :thumbsup: ... 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
thanks for the reply glenn,

that code works perfectly for the "top of page" dealy :thumbsup: ... 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.


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.


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 :confused: 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 (http://www.charityadvantage.com/familiesintransitionsantacruz/images/Mock.htm) 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:




<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. :thumbsup:


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
<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>

goughy000
11-25-2005, 06:32 PM
wow, thanx. thts just what i was looking for

DHTML Kitchen
11-26-2005, 05:06 AM
http://www.chevrolet.com/corvette/

(click on a model pic to see the effect)

I don 't actually like the effect. Corvettes are cool though!

apodixis
03-17-2006, 05:45 PM
hey everyone...

i just grabbed the code glenngv posted back on 6/11/04 for the vertical smooth scroll...



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>


worked beautifully, but when i altered the y coordinates in this line..


<a href="#c2" onclick="return bottom(450)">go to Content2</a>

to look like this...


<A HREF="#about" onClick="return bottom(900)" CLASS="HEADERNAV">About the Program</A>

it would scroll down to the bottom of the page just fine, yet when i clicked on the button at the bottom to return to the top of the page...


<A HREF="#" onClick="return top()" CLASS="FOOTER"><IMG SRC="Images/Global/btn_top.gif" BORDER="0" />&nbsp;&nbsp;Return to Top</A>

the whole page would flicker, like it was scrolling back and forth from top to bottom very quickly, and would continue to do so until you refreshed the page.

let me ask you this..the page i'm using this on is going to be updated regularly with content, hence increasing the overall length of the page. so, instead of having it scroll to a y coordinate (which will constantly be changing), can i just have it scroll down to the anchor point that i set here...


<A NAME="about"><IMG SRC="Images/header_aboutProgram.gif" ALT="About the Program" HSPACE="20" BORDER="0" /></A>

you can view the source here (http://www.wordsmatter.tv), as well as get a general idea of what i'm talking about..although i've temporarily corrected the problem by simply taking out 'onClick="return bottom(900)' from the 'about the program' link.

not a huge rush, as i've managed to work around the problem, but if someone could take a look at this and let me know what can be done i'd certainly appreciate the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum