Question

我目前正在使用平滑滚动和ID /锚标签的组合来滚动到我网站上的内容。下面的代码是获取DOM中下一个“部分”的ID，并将其ID添加为“查看下一部分”href，因此一旦点击它，它将滚动到该div的顶部。然后，它迭代通过，每次更新具有下一个ID的href，直到看到最后一个部分并且它滚动回到顶部。非常直截了当。

唯一的问题是'部分'是全屏图像，因此当它滚动到下一部分的顶部时，如果您调整浏览器的大小，该部分的顶部位置（我们滚动到的位置）已移动，并且意味着失去了位置。

我创建了一个JSFiddle。单击箭头以访问下一部分然后调整窗口大小后，您可以看到这种情况：http://jsfiddle.net/WFQ9t/3/

我希望始终保持这个最高位置，所以即使您调整浏览器大小，滚动位置也会更新以反映这一点。

提前致谢， [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

好的，请查看这个小提琴：http://jsfiddle.net/WFQ9t/9/

我做的几件事是：

制作一些全局变量来处理屏幕编号（您正在使用的屏幕以及初始窗口高度。您将在屏幕加载时以及单击.next-session箭头时使用此选项
```
var initWinHeight = $(window).height();
var numSection = 0;
```
然后我将这些变量扔进你的resizeContent()函数
```
resizeContent(initWinHeight, numSection)
```
以便它可以在加载和调整大小时使用
我让body移动到需要的位置，以适应div的移动（我仍然不明白当常规动画发生时div正在移动）。
```
$('body').css({
    top: (((windowHeight - initWinHeight)*numSection)*-1) + "px"
});
```
然后在您的点击功能中，我将1添加到部分编号，重置初始窗口高度，然后将body重置为top:0。您已经将正常动画放在页面顶部的下一部分。
```
numSection++;
initWinHeight = $(window).height();
$('body').css({top:"0px"}, 1000);
```
最后，当您到达最后一页时我重置了numSections计数器（您可能必须将此值设为0而不是1）
```
numSection = 0;
```

小提琴将所有这些都放在正确的位置，这些只是我改变代码所采取的步骤。

Answer 2

这是我找到的解决方案，但此时我不使用锚链接，我使用类

这是我的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);
});

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

2 个答案: