How do I make the page automatically "go back to top" upon clicking a javascript link

Discussion in 'JavaScript' started by Love*, Aug 6, 2009.

  1. #1
    I have a site in divs, which to lessen page loads, I use the script below so that once variables are added, it will know whether to load the header & footer, or whether just to load the content inside the div id "content".
    This way, the whole page doesn't reload (including header, sidebars, and footer), instead, just the main content.

    This goes in the header:
    <script>
    //create a XMLHttpRequest Object.
    if(window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
    } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //call this function with url of document to open as attribute
    function requestContent(url) {
    xmlhttp.open("GET",url,true);
    xmlhttp.onreadystatechange =statusListener;
    xmlhttp.send(null);
    }
    //statusListener function is called automatically whenever readystate value of XMLHttpRequest Object changes.
    //see xmlhttp.onreadystatechange =statusListener; statement above.
    //When readystate is 1, its a loading state.
    //When readystate is 4, content is loaded
    function statusListener() {
    if (xmlhttp.readyState == 1) {
    document.getElementById('content').innerHTML="loading..";
    }
    if (xmlhttp.readyState == 4) {
    //xmlhttp.responseText is the content of document requested
    document.getElementById('content').innerHTML=xmlhttp.responseText;
    }
    }
    </script>
    PHP:
    Now, on the sidebar, links to my inner pages look like this:
    <a href='javascript:requestContent("http://link.com/page.php?noheader=yes");'>Link</a>
    HTML:
    And now, for the page.php, it's something like this:
    <?php if ($_GET['noheader'] == "yes") {
       // no need to load the header
    } else {
    include ('/home/site/public_html/header.php');
    } ?>
    
    <!--==========content=========== -->
    
    CONTENT HERE
    
    <!--========//content=========== -->
    
    <?php
    if ($_GET['noheader'] == "yes") {
       // no need to load the footer
    } else {
    include('/home/site/public_html/footer.php');
    } ?>
    
    PHP:
    ^Does not load header & footer IF ?noheader=yes is present.


    Now assume everything else that needs to be there is taken care of. This works great, except that I want the page to "go back on top" once the link on the sidebar is clicked.

    The way it works now is it does what it's meant to, but if the page is really long and you've scrolled to the bottom, you stay there even when clicking a new link, and new content is added in the middle.
    If you have sidebars that are really long and you're at the bottom of the page, you won't even notice that new content has loaded, if the content is just small, and is only noticeable once you scroll the page back up (which isn't really very user-friendly).
    Well, this is understandable since it's basically what I was looking for, which was not to have any page loads.. But, is there some way to "go back to top" by clicking the link, just so the newly loaded content gets seen?

    I've always done this before - just linking to # would make the page go back to top, but this cannot be done with this, so I was wondering if there was another way to achieve this?

    Thank you. :)
     
    Love*, Aug 6, 2009 IP
  2. premiumscripts

    premiumscripts Peon

    Messages:
    1,062
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this (untested):

    window.scrollTo(0,0);
    Code (markup):
     
    premiumscripts, Aug 6, 2009 IP
    Love* likes this.
  3. Love*

    Love* Well-Known Member

    Messages:
    1,739
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    165
    Digital Goods:
    1
    #3
    OMG, you are officially the most awesome person in the world!!!!!! :p
    Works great now, thanks for quick reply!! Leaving rep!!
     
    Love*, Aug 6, 2009 IP