Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smooth scrolling with javascript...

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

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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>
    Last edited by glenngv; 06-08-2004 at 07:38 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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>
    ...
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #10
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anybody?...

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for putting up with my newbie-ness glenn... it works just fine now...

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

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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>
    Last edited by glenngv; 06-11-2004 at 10:19 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #14
    Regular Coder goughy000's Avatar
    Join Date
    Nov 2005
    Location
    England
    Posts
    415
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    is it possible to do this vertical AND horizontal?

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •