Javascript 防止窗口滚动到“折叠”下方，直到按钮单击为止

我有一种情况，我需要页面不能滚动超过某个点（我将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);

});

};

---

小提琴在这里：

固定代码

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);

});

固定小提琴：

解释

您正试图通过执行

$（'window'）.height（）

来获取窗口高度，该操作正在搜索不存在的'window'DOM元素。您希望使用

$（window）.height（）

（请注意，窗口周围的引号被省略），因为

窗口

不是DOM节点，而是对象

此外，您正在使用的

$（'html，body'）.stop.animate（{scrollTop:windowHeight}，slow）；

有多个错误。

.stop

无效，因为从

$（'html，body'）

返回的节点列表上的

stop

属性是您要调用的函数。您应该使用

$（'html，body'））.stop（）

另外，

animate

部分引用了一个变量

slow

。jQuery的animate函数将

“slow”

作为一个字符串，因此应该这样写行：

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

请注意其中包含引号，因为我们希望将字符串值

“slow”

传递给jQuery的animate函数，而不是变量

slow

---

最后，您将所有代码放在一个匿名函数中，这似乎是不必要的。

固定代码

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);

});

固定小提琴：

解释

您正试图通过执行

$（'window'）.height（）

来获取窗口高度，该操作正在搜索不存在的'window'DOM元素。您希望使用

$（window）.height（）

（请注意，窗口周围的引号被省略），因为

窗口

不是DOM节点，而是对象

此外，您正在使用的

$（'html，body'）.stop.animate（{scrollTop:windowHeight}，slow）；

有多个错误。

.stop

无效，因为从

$（'html，body'）

返回的节点列表上的

stop

属性是您要调用的函数。您应该使用

$（'html，body'））.stop（）

另外，

animate

部分引用了一个变量

slow

。jQuery的animate函数将

“slow”

作为一个字符串，因此应该这样写行：

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

请注意其中包含引号，因为我们希望将字符串值

“slow”

传递给jQuery的animate函数，而不是变量

slow

最后，您将所有代码都放在一个匿名函数中，这似乎是不必要的