how to jump to the top of the next page when paging with javascript and css

The problem

The method works well, but after clicking the Continue button, the position of the cursor remains, where it was. So only the bottom of the page is visible after changing the page.

The solution

Relax my friend, there is a way to force the page to go to the top of the next page after
called the showlayer event. You gonna need to put an extra line into your paging script.

window.scrollTo(0,0);

So, your code have to look like:

// JavaScript Document
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.visibility = 'visible';
currentLayer = lyr;
window.scrollTo(0,0);
}

function hideLayer(lyr) {
document.getElementById(lyr).
style.visibility = 'hidden';
}

//in case of simple paging, without the form, this part is not needed

function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for(i=0; i<len; i++) {
if (form[i].id.indexOf("C") != -1 ||
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}

Hope, it will work well. If you still have any problems using this paging method, drop me a line via my contact form.

---

This web development tutorial brought you by Attila Hajdu, expert web developer, multimedia specialist in Portsmouth.

back to css tips