Maintain scroll position on return to page

I have a div in the center of my webpage that contains a table the scrolls horizontally, the table is built in jquery and you simply scroll left to right.

The column titles are the links, so that when a category ios click you go to a new page that contains all the documents in that column but htis time you can click to view them.

What Im trying to do is then when they click to return to the page, I woudl like the scroll bar to return to the position it was in.

This is the output from source code


<div class="wrapper1">
<div class="container-inner">
<div class="table">
<table class='gridtable' cellpadding='0' cellspacing='1'> 
<tr>
<th><span style="font-weight:bold">1. </span><a href="view.php?corp_ID=6&amp;category=54" title="Memorandum and Articles - Click to view all documents">Memorandum and Articles </a></th>
<th><span style="font-weight:bold">2. </span><a href="view.php?corp_ID=6&amp;category=56" title="Patents - Click to view all documents">Patents </a></th>
<th><span style="font-weight:bold">3. </span><a href="view.php?corp_ID=6&amp;category=57" title="Shareholders &amp; Share Certificates - Click to view all documents">Shareholders &amp; Share Certificates </a></th>
<th><span style="font-weight:bold">4. </span><a href="view.php?corp_ID=6&amp;category=58" title="Directors and Secretaries - Click to view all documents">Directors and Secretaries </a></th>

The columns go on much farther just thought i would post it to give an idea.

This is that code above


<div class="container-outer" style="margin-top:-1px;">
<div class="container-inner">
<div class="table">
<table class='gridtable' cellpadding='0' cellspacing='1'> 
<?php 
    echo '<tr>'."\\r"; 
    $number=1;
    $catcnt = count($Categories);     
    foreach($Categories as $CatID => $Category):  
     
        $Category = str_replace("& ","&amp; ",$Category); 
        if(!isset($_GET['Cat']) || isset($_GET['Cat']) && $_GET['Cat'] == $CatID): 
            echo '<th id="'. $number .'"><span style="font-weight:bold">'. $number .'. </span><a href="view.php?corp_ID=' . $CORPid . '&amp;category=' . $CatID . '" title="' . $Category . ' - Click to view all documents">' . $Category . ' </a></th>'."\\r"; 
        endif;
  $number++;
    endforeach; 
     
    echo '</tr>'."\\r";


Thanks

I was thinking of implementing something liek this


var contactTopPosition = $("#").position().top;
$(".table").scrollTop(contactTopPosition);

And connect position top to the id on <td>

Maybe its best that I try and save it as a cookie.

Then call it back when the user returns to the page, seems logical, just looking in google for options.

OK I have tried the following code and although it seems to make sense, its not doing what I would like it to do.


<script language="javascript">
window.onload = function(){ 
var strCook = document.cookie; 
if(strCook.indexOf("!~")!=0)
{ 
var intS = strCook.indexOf("!~"); 
var intE = strCook.indexOf("~!"); 
var strPos = strCook.substring(intS+2,intE); 
document.getElementByClassName("gridtable").scrollTop = strPos; 
} 
} 
function SetDivPosition(){ 
var intX = document.getElementByClassName("gridtable").scrollTop; document.title = intX; document.cookie = "xPos=!~" + intX + "~!"; 
} 
</script>


This is trying to capture the scrollbar position of a horizonatl div on my webpage. Store it and then when the user returns, the scrollbar returns to that position.

I changed getElementByClassName(“gridtable”). to each of the outer div class names and that didnt make a difference, as I realised the scrollbar isnt attached to the table but to the outer divs’, thought I had it then, but no cigar.

Im using the log console and 2 things are standing out which Im not sure of.


window.onload = function(){ 
var strCook = document.cookie;
 
if(strCook.indexOf("!~")!=0)
{ 
var intS = strCook.indexOf("!~"); 
var intE = strCook.indexOf("~!"); 
var strPos = strCook.substring(intS+2,intE); 

console.log(strPos, "Hello, world!");

document.getElementByClassName("container-outer").scrollTop = strPos; 
}


TypeError: document.getElementByClassName is not a function main.php:108
“P” “Hello, world!”

The type error im not sure of, and the “p” as value for the position of the scrollbar is nothing like it should be Im thinking…

Changed scrollTop to scrollLeft and that didnt work either, the colsole log still coming back with “P”, and no effect to the scrollbar.


window.onload = function(){ 
var strCook = document.cookie;
 
if(strCook.indexOf("!~")!=0)
{ 
var intS = strCook.indexOf("!~"); 
var intE = strCook.indexOf("~!"); 
var strPos = strCook.substring(intS+2,intE); 
console.log(strPos, "Hello, world!");
document.getElementByClassName("container-outer").scrollLeft = strPos; 
}
} 
function SetDivPosition(){ 
var intX = document.getElementByClassName("container-outer").scrollLeft; 
document.title = intX; 
document.cookie = "xPos=!~" + intX + "~!"; 
} 


Hi,

This is where I am now, and I can capture the position of the horizontal scroll bar but can only check it when I place the scrollbar in position, refresh the page and check the console.

What I cant seem to do is store that value in a cookie, when leaving the page and then on return collect that cookie and apply the value to move the scroll bar



<script type="text/javascript">
window.onload = function(){ 
var strCook = document.cookie;
var intS = strCook.indexOf("!~"); 
var intE = strCook.indexOf("~!"); 
var strPos = strCook.substring(intS+2,intE); 
if(strCook.indexOf("!~")!=0) {
    console.log(strPos, "Hi! 0");
    $(".wrapper1").scrollLeft(strPos);
} 
else {
    console.log(strPos, "Hi! 0+");
    var hposition = ($(".wrapper1").scrollLeft());
    console.log(hposition, "Hi!");
    document.title = hposition; 
    document.cookie = "xPos=!~" + hposition + "~!";
} }
</script>


Morning all,

I think I got it, well its working fine, maybe not best practice correct, but its working.


<script type="text/javascript">
window.onload = function(){ 
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0) {
 var intS = strCook.indexOf("!~"); 
 var intE = strCook.indexOf("~!"); 
 var strPos = strCook.substring(intS+2,intE); 
 //console.log(strPos, "Hi! 0");
 $(".wrapper1").scrollLeft(strPos);
} } 
$(window).unload(function() {
  //console.log(strPos, "Hi! 0+");
 var hposition = ($(".wrapper1").scrollLeft());
 document.title = hposition; 
 document.cookie = "xPos=!~" + hposition + "~!";
});
</script>

How do I delete that cookie on another different page using onload

is it something like this


$.cookie(document.cookie, null);

The reason why I am asking, is because Im not actually sure what I have called the cookie in honesty, which sounds silly, but I dont know what to reference to delete it on the other page


$(window).unload(function() {
  //console.log(strPos, "Hi! 0+");
 var hposition = ($(".wrapper1").scrollLeft());
 document.title = hposition; 
 document.cookie = "xPos=!~" + hposition + "~!";
});