Scroll Bar Position When Clicking on link to reload page

JavaScript
1

Hi All
I have a date table which you can update time slots with. When you click the href link the page reloads and returns to the page top. I need it to stay at the same scroll bar position as
the user will probably be updating several time slots at the same time.

I have had a look online and found one solution but cant get it to work.

My page pulls a table for a 24 hour clock so there are 24 rows. I have droped the id element tab in the opening part of my <tr> tag

echo(“<td id=‘tabs’ bgcolor=‘#25B8DA’ span class=‘create_slots_header’ align=‘center’>$columnTime</span></td>”);

Not sure whats wrong or if I am doing it all wrong. Any help would be great!

<script>
(function() {
var sneaky = new ScrollSneak(location.hostname), tabs = document.getElementById(‘tabs’).getElementsByTagName(‘li’), i = 0, len = tabs.length;
for (; i < len; i++) {
tabs[i].onclick = sneaky.sneak;
}

document.getElementById('next').onclick = sneaky.sneak;

})();
</script>

2

You never closed the initial <td> tag, do this:
echo(“<td id=‘tabs’ bgcolor=‘#25B8DA’><span class=‘create_slots_header’ align=‘center’>$columnTime</span></td>”);

Also, make sure the source code for ScrollSneak is included. If that doesn’t fix the problem I could suggest another solution.

3

I cant get it working, what was your other idea ?

4

Hi I have had a good search around and came across this script but dont have a clue how to call it in my page. There is a JS file in the header and javascript at the end of the page.
It mentions click handlers applied to the links. How would I do this on a href link

Any help would be great

  1. click handlers are applied to the links that should maintain the scroll bar position between page loads
  2. when one of those links is clicked, the click handler grabs the scroll position from the window or document object and stores it as a string on the window.name object and then allows the new page to load
  3. when a page loads, the window.name object is checked to see if a scroll position has been stored in it, and if it has one, it scrolls to that position

Main JS File in header

var ScrollSneak = function(prefix, wait) {
// clean up arguments (allows prefix to be optional - a bit of overkill)
if (typeof(wait) == ‘undefined’ && prefix === true) prefix = null, wait = true;
prefix = (typeof(prefix) == ‘string’ ? prefix : window.location.host).split(‘_’).join(‘’);
var pre_name;

// scroll function, if window.name matches, then scroll to that position and clean up window.name
this.scroll = function() {
    if (window.name.search('^'+prefix+'_(\\\\d+)_(\\\\d+)_') == 0) {
        var name = window.name.split('_');
        window.scrollTo(name[1], name[2]);
        window.name = name.slice(3).join('_');
    }
}
// if not wait, scroll immediately
if (!wait) this.scroll();

this.sneak = function() {
// prevent multiple clicks from getting stored on window.name
if (typeof(pre_name) == 'undefined') pre_name = window.name;

// get the scroll positions
    var top = 0, left = 0;
    if (typeof(window.pageYOffset) == 'number') { // netscape
        top = window.pageYOffset, left = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) { // dom
        top = document.body.scrollTop, left = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { // ie6
        top = document.documentElement.scrollTop, left = document.documentElement.scrollLeft;
    }
// store the scroll
    if (top || left) window.name = prefix + '_' + left + '_' + top + '_' + pre_name;
    return true;
}

}

javacript at end of page

<script>
(function() {
var sneaky = new ScrollSneak(location.hostname), tabs = document.getElementById(‘tabs’).getElementsByTagName(‘li’), i = 0, len = tabs.length;
for (; i < len; i++) {
tabs[i].onclick = sneaky.sneak;
}

document.getElementById('next').onclick = sneaky.sneak;

})();
</script>

5

Oops I meant to respond yesterday and something came up…

That is just plain overkill! You could actually do it without javascript. Here are two ways (with/without javascript):

  • Add a hash to the url prior to reloading the page
      • Either with javascript: window.location.hash = “#hour15”;
      • Or with straightup html: “<a href=”#hour15"></a>
  • Have an anchor at each hour, like this “<a name=‘hour15’></a>”
  • The page will automatically just scroll there for you
  • You could even remove the hash whenever the page loads if you wanted