After considering your feedback in one of the comments on Luke's answer, I revisited this issue about needing to keep track of your previous location.
In order to ensure you can return to where you were after resizing, you can implement a similar code structure like this:
var lastPosition = "middle";
var $body = $('html, body');
window.scrollTo(($(document).width() - $(window).width()) / 2, 0);
$('#go_left').click(function() {
$body.scrollTo('0px', 800);
lastPosition = "left";
});
$('#go_right').click(function() {
$body.scrollTo('100%', 800);
lastPosition = "right";
});
$('#left_link').click(function() {
$body.scrollTo('50%', 800);
lastPosition = "middle";
});
$('#right_link').click(function() {
$('html, body').scrollTo('50%', 800);
lastPosition = "middle";
});
$(window).off('resize.menu').on('resize.menu', function() {
switch(lastPosition)
{
case "left":
$body.scrollTo('0px', 0);
break;
case "middle":
$body.scrollTo('50%', 0);
break;
case "right":
$body.scrollTo('100%', 0);
break;
}
})
Check out the DEMO for a visual representation.
I've optimized by caching the body element to improve performance slightly.
Remember to unbind the event when leaving the page to prevent memory leaks.
While there is still some lag in re-positioning, I'm working on resolving that next.
Edit
I found a way to reduce lag and flickering during resize events.
Using scrollLeft() instead in the resize method yields better results, although not perfect it is a significant improvement:
$(window).off('resize.menu').on('resize.menu', function() {
var elementToScrollTo = "div#main";
switch(lastPosition)
{
case "left":
elementToScrollTo = "div#left";
break;
case "middle":
elementToScrollTo = "div#main";
break;
case "right":
elementToScrollTo = "div#right";
break;
}
$(window).scrollLeft($(elementToScrollTo).position().left);
})
View the updated DEMO with improved functionality.