Home/ Questions/Q 8291269
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T13:04:37+00:00

I’m developing my first one-page horizontal website using jQuery and the scrollTo plugin. The

  • 0

I’m developing my first one-page horizontal website using jQuery and the scrollTo plugin. The site has 3 screens and starts centered (showing the middle screen). To accomplish this, the logical approach for me was to make <body> have width:300%;, with each screen having width:33.3333%;. When you click a <a>, jQuery sends you to another screen, going left or right.

This works great, however when I try to resize my window I lose all structure, the widths stop making sense. I would like to know what I can do to fix this, but more importantly I would like to understand why this happens.

Here’s Mr. Fiddle. Resize your window and you’ll see what’s wrong. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I re-evaluated this as you mentioned in one of the comments on Luke’s answer that you need to remember where you have been last.

    You need to track where you are and then go back to there after re-sizing.
    Use code similar to 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;
    }
})​

    See DEMO

    I also cached the body element so you do not have to constantly re-traverse to it when scrolling but that added little performance gain.

    As before, remember to unbind the event when you leave the page or you could end up with a memory-leak.

    I still haven’t managed to get rid of the lagging re-positioning but that is something to work on after.

    Edit
    Finally found a way to minimise the lag/flickering on resize.

    Use scrollLeft() instead in the resize method it works better, not perfect/prefect but much much better:

    $(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);
})

    Updated DEMO

    • 0