Обновить положение прокрутки при изменении размера окна

Хорошо, проверьте эту скрипту: http://jsfiddle.net/WFQ9t/9/

Несколько вещей, которые я сделал, были:

1. Созданы некоторые глобальные переменные для обработки номера экрана (на каком экране вы находитесь, а также начальной высоты окна. Вы будете использовать это при загрузке экрана, а также при нажатии на стрелку .next-session.

   var initWinHeight = $(window).height();
   var numSection = 0;
   

2. Затем я добавил эти переменные в вашу функцию resizeContent().

   resizeContent(initWinHeight, numSection)
   

   так что он будет работать при загрузке и изменении размера

3. Я заставил body двигаться там, где это необходимо, чтобы приспособиться к движению div (я до сих пор не понимаю, какие div двигаются, когда происходит обычная анимация).

   $('body').css({
       top: (((windowHeight - initWinHeight)*numSection)*-1) + "px"
   });
   

4. Затем в вашей функции щелчка я добавляю 1 к номеру раздела, сбрасываю начальную высоту окна, а затем также сбрасываю body на top:0. Обычная анимация, которая у вас уже есть, помещает следующий раздел вверху страницы.

   numSection++;
   initWinHeight = $(window).height();
   $('body').css({top:"0px"}, 1000);
   

5. Наконец, я сбрасываю счетчик numSections, когда вы достигаете последней страницы (возможно, вам придется сделать это 0 вместо 1)

   numSection = 0;
   

В скрипке все это находится в правильных местах, это всего лишь шаги, которые я предпринял для изменения кода.

Вот решение, которое я нашел, но на данный момент я не использую якорные ссылки, я использую классы

Вот мой HTML-код:

<section class="section">
    Section 1
</section>

<section class="section">
    Section 2
</section>

<section class="section">
    Section 3
</section>

<section class="section">
    Section 4
</section>

И вот мой код jQuery/Javascript, я на самом деле использовал очень простой способ:

    $('.section').first().addClass('active');

/* handle the mousewheel event together with 
 DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();//prevent the default mousewheel scrolling
    var active = $('.section.active');
    //get the delta to determine the mousewheel scrol UP and DOWN
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

    //if the delta value is negative, the user is scrolling down
    if (delta < 0) {
        next = active.next();
        //check if the next section exist and animate the anchoring
        if (next.hasClass('section')) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: next.offset().top
                }, 800);

                next.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 200);
        }

    } else {
        prev = active.prev();

        if (prev.length) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: prev.offset().top
                }, 800);

                prev.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 200);
        }

    }
});


/*THE SIMPLE SOLUTION*/
$(window).resize(function(){
    var active = $('.section.active')

     $('body, html').animate({
        scrollTop: active.offset().top
    }, 10);
});