dcsimg
www.webdeveloper.com
Results 1 to 15 of 15

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
    Share on Google+

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,848
    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
    Share on Google+

  3. #3
    Join Date
    Jun 2015
    Posts
    2

    Post help

    Ehere I need to put this code window.location.reload();

    I want refresh after get the botton


    Quote Originally Posted by coothead View Post
    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
    Share on Google+

  4. #4
    Join Date
    Dec 2015
    Posts
    87
    Hey,try this in your code:
    window.scrollTo(0,document.body.scrollHeight);
    For more information check" http://www.sourcetricks.com/2010/07/...l#.VqXub8rbGV4 "

    Good Luck.
    Share on Google+

  5. #5
    Join Date
    Sep 2016
    Posts
    1
    Hello There. Works like a charm.

    I have a question: is it possible to add a function to stop this scritp on mousedown or if user clicks on the scrollbar?

    Thanks in advance.
    Share on Google+

  6. #6
    Join Date
    Jun 2017
    Posts
    9

    Scroll to bottom arrow should get changed once reaches to bottom .. similar to gpage

    Quote Originally Posted by Linksbreaker View Post
    Hello There. Works like a charm.

    I have a question: is it possible to add a function to stop this scritp on mousedown or if user clicks on the scrollbar?

    Thanks in advance.

    Ya me too wanted to have the similar effect along with carot/arrow icon which changes its direction automatically when we scroll to bottom completely (after seven clicks on icon ) Here is the link/page am trying to mimic in my project as reference

    Could you pls share the code which shows similar icon and scroll effect (go to bottom and top...seems like these icon was created using angular javascript)
    Share on Google+

  7. #7
    Join Date
    Jun 2017
    Posts
    9
    Hi Coothead, I am trying to mimic the About gmail Google page in my project, as it seems to be the reference now.

    The icon effect at complete bottom and scrolling bottom step by step effect for each click is really nice and I would like to do something similar.

    google dot com/gmail/about/

    wanted to have the similar effect along with carot/arrow icon which changes its direction automatically when we scroll to bottom completely (after seven clicks on icon ) Here is the link/page am trying to mimic in my project as reference

    Could you pls share the code which shows similar icon and scroll effect (go to bottom and top...seems like these icon was created using angular javascript) Thanks in advannce
    Share on Google+

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,433
    If you want help with something then you make a new thread and then post the URL of this thread in that new post.

    Two things you shouldn't do is resurrect old posts to get help with a problem you are having and not hijack a thread (by posting your needs in anothers thread)

    The result is you get your responses quicker and the forum isn't littered with old outdated posts that may not have any relevance today because of code enhancements, progress and old code being depreciated.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...
    Share on Google+

  9. #9
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,848

    ...and note that \\.\ really meant to say "deprecated" rather than "depreciated".

    Removing the errant "i" makes all the difference.

    The Oxford Dictionary of English gives this information...

    deprecated

    [ chiefly of a software feature ]...
    to be usable but regarded as obsolete and best
    avoided, because it has been superseded.


    depreciated

    diminished in value over a period of time.


    coothead
    ~ the original bald headed old fart ~
    Share on Google+

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,433
    My brain thinks faster than I can scramble my fingers around the keyboard... I luv Typo;s
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...
    Share on Google+

  11. #11
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,848

    I otefn mkae tpynig eorrrs mlseyf.

    coothead
    ~ the original bald headed old fart ~
    Share on Google+

  12. #12
    Join Date
    Jun 2017
    Posts
    9
    Quote Originally Posted by \\.\ View Post
    If you want help with something then you make a new thread and then post the URL of this thread in that new post.

    Two things you shouldn't do is resurrect old posts to get help with a problem you are having and not hijack a thread (by posting your needs in anothers thread)

    The result is you get your responses quicker and the forum isn't littered with old outdated posts that may not have any relevance today because of code enhancements, progress and old code being depreciated.
    Thanks Folks, I have created a new post...please have a visit for your thoughts/creativity/solution. Here is the link
    http://www.webdeveloper.com/forum/sh...ortion-and-top

    " http://www.webdeveloper.com/forum/sh...ortion-and-top "
    Share on Google+

  13. #13
    Join Date
    Jun 2017
    Location
    Serpong
    Posts
    4
    Quote Originally Posted by hongho2 View Post
    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
    Hi hongho, maybe you can use my script

    <style>
    .mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursorointer;
    }
    </style>
    <img style="width:60px" class="mbw-back-to-top" src=" CHANGE WITH IMAGES ARROW LINK" />
    <script type="text/javascript">
    /*****mybloggersworld.com***/
    jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
    jQuery('.mbw-back-to-top').fadeIn(duration);
    } else { //www.mybloggersworld.com
    jQuery('.mbw-back-to-top').fadeOut(duration);
    }
    });

    jQuery('.mbw-back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
    })
    });
    </script>

    I used this javascript for my website like domino online, film semi, and cashmarket agen bola (Maybe you can seeing my website)

    Thank You
    Share on Google+

  14. #14
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,433
    IMHO this thread needs closing to stop people replying to an old post.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...
    Share on Google+

  15. #15
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,848

    Quote Originally Posted by \\.\ View Post
    "IMHO this thread needs closing to stop people replying to an old post."
    Have you ever considered becoming a moderator?

    If you were to, then a couple of button clicks would get the job done.

    coothead
    ~ the original bald headed old fart ~
    Share on Google+

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