Question

我有一种情况，我需要页面不能滚动超过某一点（我将英雄设置为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/

Answer 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()来搜索窗口高度，这是一个＆＃39;窗口＆＃39;不存在的DOM元素。您想使用$(window).height()（请注意窗口周围的引号的省略），因为window不是DOM节点，它是一个对象。

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

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

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

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

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

防止窗口滚动到折叠，直到按钮单击

1 个答案: