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

我目前正在使用smooth scroll和IDs/anchor标签的组合来滚动到我网站上的内容。下面的代码获取DOM中下一个“节”的ID，并将其ID添加为“查看下一节”href，因此单击后，它将滚动到该div的顶部。然后，它会迭代，每次都用下一个ID更新href，等等，直到看到最后一个节并滚动回顶部。很简单

唯一的问题是“部分”是全屏图像，因此当它滚动到下一部分的顶部时，如果调整浏览器大小，则该部分的顶部位置（我们滚动到的位置）已移动，这意味着该位置丢失

我已经创建了一个JSFIDLE。单击箭头访问下一部分，然后调整窗口大小后，您可以看到这种情况：

我希望始终保持此顶部位置固定，因此即使调整浏览器大小，滚动位置也会更新以反映这一点

提前感谢,， R

---

好的，请看看这把小提琴：

我做的几件事是：

制作了一些全局变量来处理屏幕编号（您所处的屏幕以及初始窗口高度）。当屏幕加载时，以及当您单击

。下一个会话

箭头时，您将使用此变量

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

然后我将这些变量放入您的

resizeContent（）

函数中

resizeContent(initWinHeight, numSection)

这样它就可以加载并调整大小

我让

body

在需要的地方移动，以适应div的移动（我仍然不知道常规动画发生时div在移动什么）

然后在您的单击功能中，我在节号中添加1，重置初始窗口高度，然后将

正文

重置为

top:0

。您已经使用的正常动画将下一节置于页面顶部

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

最后，当您到达最后一页时，我重置了

numSections

计数器（您可能需要将其设为0而不是1）

---

fiddle将所有这些都放在了正确的位置，这些只是我更改代码所采取的步骤。

我找到了一个解决方案，但我现在不使用锚定链接，而是使用类

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

$（'.section'）.first（）.addClass（'active'）；
/*与一起处理鼠标滚轮事件
DOMMouseScroll在跨浏览器上工作*/
$（文档）.on（'mousewheel-DOMMouseScroll'，函数（e）{
e、 preventDefault（）；//防止默认鼠标滚轮滚动
var active=$（'.section.active'）；
//获取增量以确定鼠标滚轮上下滚动
var delta=e.originalEvent.detail<0 | | e.originalEvent.wheeldta>0？1:-1；
//如果增量值为负值，则用户正在向下滚动
if（δ<0）{
下一步=活动。下一步（）；
//检查下一节是否存在并设置锚定动画
if（next.hasClass（'section'））{
var timer=setTimeout（函数（）{
$（'body，html'）。设置动画({
scrollTop:next.offset（）.top
}, 800);
next.addClass（'active'）
.sides（）.removeClass（'active'）；
清除超时（计时器）；
}, 200);
}
}否则{
prev=active.prev（）；
if（上一个长度）{
var timer=setTimeout（函数（）{
$（'body，html'）。设置动画({
scrollTop:prev.offset（）.top
}, 800);
上一个addClass（'active'）
.sides（）.removeClass（'active'）；
清除超时（计时器）；
}, 200);
}
}
});
/*简单的解决方案*/
$（窗口）。调整大小（函数（）{
var active=$（'.section.active'）
$（'body，html'）。设置动画({
scrollTop:active.offset（）.top
}, 10);
});

我会使用一个resize end插件，并简单地触发您现有的平滑滚动。这里有一个可能的插件：我实际上只需要制作一个1px div，随着页面滚动，然后在调整窗口大小时，始终调用

。scrollTop（）

获取该div的真实滚动位置。@ntgCleaner感谢您的帮助。您能提供一个例子吗？我理解1px div随页面滚动，但如何使视口在调整大小时保持不变？@rdck我正在处理您的小提琴。我会看看是否能很快找到它。@rdck什么控制div的移动？非常感谢s！看看JSFIDLE，一旦你滚动一次并返回顶部，一旦你调整大小，它似乎仍然会失去顶部？除非JSFIDLE链接错误？@rdck编辑了小提琴，在屏幕重置时将

numSection

更改为等于零。看起来它现在可以工作了。

numSection = 0;

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

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

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

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

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