在调整窗口大小时更新滚动位置

Question

I'm currently using a combination of smooth scroll and IDs/anchor tags to scroll to content on my site. The code below is getting the ID of the next 'section' in the DOM, and adding it's ID as the 'view next section' href, so once it's clicked, it'll scroll to the top of that div. Then, it iterates through, updating the href with the next ID each time etc until the last section is seen and it scrolls back to the top. Pretty straightforward.

The only problem is that the 'sections' are fullscreen images, so as it's scrolling to the top of the next section, if you resize the browser, the top position of that section (where we scrolled to) has moved, and means the position is lost.

I've created a JSFiddle. You can see this happening after you click the arrow to visit the next section then resize the window: http://jsfiddle.net/WFQ9t/3/

I'm wanting to keep this top position fixed at all times so even if you resize the browser, the scroll position is updated to reflect this.

Thanks in advance, R

var firstSectionID = $('body .each-section').eq(1).attr('id');
$('.next-section').attr('href', '#' + firstSectionID);

var i = 1;
$('.next-section').click(function() {

    var nextSectionID = $('body .each-section').eq(i).attr('id');
    i++;
    $('.next-section').attr('href', '#' + nextSectionID);

    var numberOfSections = $('body .each-section').length;
    var lastSectionID = $('body .each-section').eq(numberOfSections).attr('id');

    if ($('.next-section').attr('href') == '#' + lastSectionID ) { 
        $('.next-section').attr('href', '#introduction');
        i = 1;
    }

});

Answer 1

Ok, Please check out this fiddle: http://jsfiddle.net/WFQ9t/9/

The few things I did were:

1. Made some global variables to handle the screen number (which screen you're on and also the initial window height. You will use this when the screen loads and also when you click on the .next-session arrow.

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

2. Then I tossed those variables into your resizeContent() function

    resizeContent(initWinHeight, numSection) 

   so that it will work on load and resize

3. I made the body move around where it needs to, to accomodate for the movement of the divs (I still don't understand what divs are moving when the regular animation happens).

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

4. Then in your click function, I add 1 to the section number, reset the initial window height and then also reset the body to top:0 . The normal animation you have already puts the next section at the top of the page.

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

5. Finally, I reset the numSections counter when you reach the last page (You might have to make this 0 instead of 1)

    numSection = 0; 

The fiddle has all of this in the correct places, these are just the steps I took to change the code.

Answer 2

Here is a solution that i found, but I dont use anchor links at this point, i use classes

Here is my HTML code:

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

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

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

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

And here is my jQuery/Javascript code, I actually used a preety simple way:

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