防止窗口在折叠下方滚动，直到单击按钮答案

【问题标题】：Prevent window scroll below fold until button click防止窗口在折叠下方滚动，直到单击按钮
【发布时间】：2016-09-07 15:38:06
【问题描述】：

我有一种情况，我需要页面不能滚动超过某个点（我将 hero 设置为 100vh 并且用户根本不能滚动），然后单击按钮时阻止滚动被禁用，然后用户会自动向下滚动到正下方的锚链接（基本上向下滚动 100vh 或整个窗口高度）。我需要一个流畅的滚动动画，而不是一个快速的跳跃。

我尝试过使用以下代码的变体，但没有成功。到目前为止，它确实有问题并且会跳来跳去，当您重新加载页面时，正文溢出设置为隐藏，但窗口位置并不总是在屏幕顶部，因此您仍然可以看到折叠下方的一些内容但仍然无法滚动.

function() {

function smoothScroll(){ 
    windowHeight = $('window').height();
    $('html, body').stop.animate({scrollTop: windowHeight}, slow);
}

$('.bottom-nav').on('click', '.fold-trigger', function(event) {
    $('.home').css('overflow', 'visible');
    setTimeout(smoothScroll(), 1000);

});

};

小提琴在这里：https://jsfiddle.net/njpatten/yxkvnymu/1/

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

固定代码

function smoothScroll(){ 
    windowHeight = $(window).height();
    $('html, body').stop().animate({scrollTop: windowHeight}, "slow");
}

$('.bottom-nav').on('click', '.fold-trigger', function(event) {
    $('.home').css('overflow', 'visible');
    setTimeout(smoothScroll(), 1000);

});

固定小提琴：https://jsfiddle.net/yxkvnymu/2/

说明

您正在尝试通过执行$('window').height() 来获取窗口高度，该操作正在搜索不存在的“窗口”DOM 元素。您想使用$(window).height()（注意省略了窗口周围的引号），因为window 不是DOM 节点，它是一个对象。

此外，您使用的$('html, body').stop.animate({scrollTop: windowHeight}, slow); 有多个错误。 .stop 无效，因为从 $('html, body') 返回的 NodeList 上的 stop 属性是您要调用的函数。你应该使用$('html, body').stop()。

另外，animate 部分引用了变量slow。 jQuery 的 animate 函数将"slow" 作为字符串，因此该行应该这样写：

.animate({scrollTop: windowHeight}, "slow");

请注意其中包含引号，因为我们希望将字符串值 "slow" 传递给 jQuery 的 animate 函数，而不是变量 slow。

最后，您将所有代码都包含在一个匿名函数中，这似乎没有必要。

【讨论】：