www.webdeveloper.com
Results 1 to 13 of 13

Thread: Keeping Scrollbar Position On Refresh

  1. #1
    Join Date
    Nov 2004
    Location
    England Sunderland
    Posts
    102

    Keeping Scrollbar Position On Refresh

    Hi

    I have a page which uses <meta http-equiv="refresh" content="240">

    The problem im having is if i am half way downthe page when it refreshes, the refresh takes me back to the top of the page is it possible for the browser to keep the scrollbar position on refresh so that i do not loose my position on the page??

    Thanks

    Baz

  2. #2
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Somehow you will need to keep track of the scroll position. Most likely a session cookie.

    Set the value with onscroll and when the page loads check the value of the cookie. If it exists then scroll there with scrollTo().

    If I were not busy at work, I would write it for you.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  3. #3
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Take a look here, this might do you

    http://www.huntingground.freeserve.c.../scrollpos.htm
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  4. #4
    Join Date
    Mar 2009
    Posts
    1

    page refresh without changing scroll bar position

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function getCookie(name)
    {
    var start = document.cookie.indexOf( name + "=" );
    var len = start + name.length + 1;
    if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
    return null;
    }
    if ( start == -1 ) return null;
    var end = document.cookie.indexOf( ";", len );
    if ( end == -1 ) end = document.cookie.length;
    return unescape( document.cookie.substring( len, end ) );
    }

    function doload()
    {
    var scrollTop = getCookie ("scrollTop");
    var scrollLeft = getCookie("scrollLeft");

    if (!isNaN(scrollTop))
    {
    document.body.scrollTop = scrollTop;
    document.documentElement.scrollTop = scrollTop;

    }
    if (!isNaN(scrollLeft))
    {
    document.body.scrollLeft = scrollLeft;
    document.documentElement.scrollLeft = scrollLeft;
    }

    Delete_Cookie("scrollTop");
    Delete_Cookie("scrollLeft");
    setTimeout( "Refresh()", 120*1000 );
    }

    function Refresh()
    {
    document.cookie = 'scrollTop=' + f_scrollTop();
    document.cookie = 'scrollLeft=' + f_scrollLeft();
    document.location.reload(true);
    }

    //Setting the cookie for vertical position
    function f_scrollTop() {
    return f_filterResults (
    window.pageYOffset ? window.pageYOffset : 0,
    document.documentElement ? document.documentElement.scrollTop : 0,
    document.body ? document.body.scrollTop : 0
    );
    }

    function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
    n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
    }

    //Setting the cookie for horizontal position
    function f_scrollLeft() {
    return f_filterResults (
    window.pageXOffset ? window.pageXOffset : 0,
    document.documentElement ? document.documentElement.scrollLeft : 0,
    document.body ? document.body.scrollLeft : 0
    );
    }


    function Delete_Cookie(name)
    {
    document.cookie = name + "=" + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";

    }

    window.onload=doload;

    //-->

    </SCRIPT>

  5. #5
    Join Date
    Jan 2008
    Location
    Surprise, AZ
    Posts
    115

    resolved Rajni you are my hero!

    It is amazing that I could not find this anywhere on the web ... ty webdeveloper and Rajni!

  6. #6
    Join Date
    Nov 2012
    Posts
    4

    Very simple solution

    I have been searching for this off and on for a couple of years and all I could find were wrong answers, code that didn't work and long pages of complicated code just to remember the scroll position. It can't possibly be that difficult.

    Well, it isn't. It is super easy. I had to search a bunch of forums then whittle down each example until I finally got it to work with a minimum of fluff. You don't need a zillion lines of code, just two javascript snippets and a PHP cookie getter. You should be able to do it with pure javascript but I didn't need to so I mixed in some PHP.

    This saves your current scroll position in a cookie whenever you scroll. Whenever the page loads it gets the scroll position from the cookie and loads the page at that scroll position. Voila! No more jumping to the top of the page when you reload. It works for links as well as the http-equiv refresh. I tried it with FireFox 15.0.1 and Chrome.

    First, in the body tag (using PHP):

    print "<body onScroll=\"document.cookie='ypos=' + window.pageYOffset\" onLoad='window.scrollTo(0,$ypos)'>";

    And, above this,in your PHP code before anything that causes output to the browser:

    $ypos = $_COOKIE["ypos"];

    That's it. Works every time for me.

  7. #7
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by rsduhamel View Post
    Well, it isn't. It is super easy. I had to search a bunch of forums then whittle down each example until I finally got it to work with a minimum of fluff. You don't need a zillion lines of code, just two javascript snippets and a PHP cookie getter. You should be able to do it with pure javascript but I didn't need to so I mixed in some PHP.
    Fine if you have a server side language available, and you can be certain that nothing will overwrite your onscroll handler, and you'll never need to override the action when you link to your page using a #parameter or a querystring.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  8. #8
    Join Date
    Nov 2012
    Posts
    4

    Okay, how about this?

    A little more work and here it is with no PHP. Pure javascript.

    First you need a read-cookie function. Put this in the <head> section of your page:

    <script language="JavaScript">
    function readCookie(name){
    return(document.cookie.match('(^|; )'+name+'=([^;]*)')||0)[2]
    }
    </script>

    Next you modify the body tag as follows:

    <body onScroll=\"document.cookie='ypos=' + window.pageYOffset\" onLoad=\"window.scrollTo(0,readCookie('ypos'))\">

    Credit to the following page where I stole the read-cookie function:

    http://stackoverflow.com/questions/5...-in-javascript

  9. #9
    Join Date
    Nov 2012
    Posts
    1
    Quote Originally Posted by rsduhamel View Post
    A little more work and here it is with no PHP. Pure javascript.

    First you need a read-cookie function. Put this in the <head> section of your page:

    <script language="JavaScript">
    function readCookie(name){
    return(document.cookie.match('(^|; )'+name+'=([^;]*)')||0)[2]
    }
    </script>

    Next you modify the body tag as follows:

    <body onScroll=\"document.cookie='ypos=' + window.pageYOffset\" onLoad=\"window.scrollTo(0,readCookie('ypos'))\">

    Credit to the following page where I stole the read-cookie function:

    http://stackoverflow.com/questions/5...-in-javascript

    I can't get this work for me. Below are two pages with the code but it doesn't work. What's the problem?

    uweb.txstate.edu/~muk2/Untitled-1.html
    uweb.txstate.edu/~muk2/Untitled-2.html

  10. #10
    Join Date
    Nov 2012
    Posts
    4
    Oops!

    Terrible mistake on my part. I cut and pasted this from my PHP code. I tried to remove all the extras but missed some backslashes. Here is the fixed code.

    Quote Originally Posted by rsduhamel View Post
    A little more work and here it is with no PHP. Pure javascript.

    First you need a read-cookie function. Put this in the <head> section of your page:

    <script language="JavaScript">
    function readCookie(name){
    return(document.cookie.match('(^|; )'+name+'=([^;]*)')||0)[2]
    }
    </script>

    Next you modify the body tag as follows:

    <body onScroll="document.cookie='ypos=' + window.pageYOffset" onLoad="window.scrollTo(0,readCookie('ypos'))">

    Credit to the following page where I stole the read-cookie function:

    http://stackoverflow.com/questions/5...-in-javascript

  11. #11
    Join Date
    Nov 2012
    Posts
    4
    My mistake. I forgot to remove some backslashes when I cut and pasted this from my PHP code. Remove the backslashes and it should work.

  12. #12
    Join Date
    Nov 2012
    Location
    France
    Posts
    4
    Wonderful beat ! I would like to apprentice at the same time as you amend your site, how could i subscribe for a wephorum website? The account helped me a appropriate deal. I had been a little bit familiar of this your broadcast provided shiny transparent concept best wishes

  13. #13
    Join Date
    Dec 2012
    Posts
    1
    rsduhamel,

    My experience was much the same as yours until I found your solution. I find it to work beautifully in all major browsers except, of course, IE. Would you kindly supply the code for an IE workaround. Thanks.

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