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

Thread: How do I auto scroll down a page in HTML?

  1. #1
    Join Date
    Nov 2017
    Posts
    2

    How do I auto scroll down a page in HTML?

    Hello-

    I am looking for a workaround...I think I need HTML to autoscroll down a page.

    For example, when I click "SHOP" the page refreshes, but the image with click through link isn't immediately visible. Thinking if I add HTML script to have it autoscroll down, that would awesome.

    You can see what my website looks like at www.twintemple.com

    I found the below code from user Coothead which seemed to work, if I could only modify it so it does not scroll up and down ad infinitum?

    Anyone have any advice???

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

  2. #2
    Join Date
    Dec 2012
    Posts
    1,556
    1. Your HTML is a one pager, i. e. all the sections (mucic, contact, shows) are on one page. No need to keep an extra page for each section.
    2. Then you can skip to the desired section by using a href like this:
    Code:
    							<ul class="pages">							
    								<li><a href="#" class="archive">Home</a></li>
    								<!-- one page section links -->
    							        <li><a href="#description" class="description internal-page-link">About</a></li>
    and so on ...
    Last edited by Sempervivum; 11-09-2017 at 02:13 AM.

  3. #3
    Join Date
    Nov 2017
    Posts
    5

    Lightbulb Auto scroll page with coding example

    Hello,
    firstly you have (Id="link") in <a>tag for shop button.
    <a id="link" href="#">Shop</a>

    After that you have to give(id="posts") in section Id.
    <a id="posts"/>

    now, you have to call the function to scroll down the page.
    function scrollToAnchor(aid){
    var aTag = $("a[id='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
    }

    $("#link").click(function() {
    scrollToAnchor('posts');
    });

    Now, your page will be not refreshed and automatically page will scroll down to click on the shop button.

  4. #4
    Join Date
    Oct 2017
    Posts
    6
    I click "SHOP" the page refresh, but the image with click from beginning to end link isn't immediately visible. Thinking if I add HTML writing to have it autoscroll down, that would awesome.

  5. #5
    Join Date
    Mar 2012
    Posts
    3,961
    Hi and welcome to the site. You do NOT need to use JS to scroll to a specific point in the page when you click on an anchor. You just need to give the target an ID and specify the ID in the HREF. E.g.

    HTML Code:
    <a href="#shop"> go to shop</a>
    
    <!-- other code here... -->
    
    <div id="shop">
    
    </div>
    Clicking on the anchor "go to shop" will refresh the page and display it either from the id "shop" (if there is sufficient content after it to fill the display) or including the id "shop" down to the end of the page.

    You only need to use JS if you want the page to be re-displayed without refreshing it.

  6. #6
    Join Date
    Dec 2012
    Posts
    1,556
    If you want help you have to read the postings carefully and follow the instructions being given.
    In my posting #2 and in Jedaisol's #4 there was described every thing you have to do in order to achieve what you desire.
    Last edited by Sempervivum; 11-13-2017 at 05:50 AM.

  7. #7
    Join Date
    Oct 2017
    Posts
    6
    This is such an informative post. You have a lot of categorically great points. I wish I had this post as a means when I in full swing forum...

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