www.webdeveloper.com
Results 1 to 2 of 2

Thread: auto scroll down and up

  1. #1
    Join Date
    Apr 2005
    Posts
    8

    auto scroll down and up

    Hi,

    I need to have the page auto scroll down and up then repeat it. My code below is auto scroll down but it didn't back up to the top. Can any one pls help?

    <script type="text/javascript">
    function pageScroll() {
    window.scrollBy(0,50); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
    }
    </script>

    <body onLoad="pageScroll()">

    Thanks

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there hongho2,

    perhaps this will help your cause...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>scroll up and down ad infinitum</title>
    
    <style>
    #container {
        position:relative;
        height:4000px;
     }
    #container h2 {
        padding:50px 0;
        text-align:center;
     }
    #container h2:last-of-type {
        position:absolute;
        bottom:0;
        width:100%;
     } 
    </style>
    
    <script>
    (function() {
       'use strict';
    
       var dbh,sto,num=50,temp=0,scrolldelay=100;
    
    function init(){ 
        dbh=document.body.offsetHeight;
        pageScroll();
     }
    
    function pageScroll() {
        window.scrollBy(0,num);
        temp+=num;
    if((temp>=dbh)||(temp<=0)){
        num=-num;
     }
       sto=setTimeout(function(){pageScroll();},scrolldelay);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    })();
    </script>
    
    </head>
    <body>
    
    <div id="container">
     <h2>This is the Top</h2>
     <h2>This is the Bottom</h2>
    </div>
    
    </body>
    </html>


    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles