防止窗口滚动低于折叠，直到按钮点击

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

来源

2016-09-07 njpatten

固定码

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节点，它是一个对象。

此外，您正在使用其中有多个错误。 .stop是无效的，因为从$('html, body')返回的NodeList上的stop属性是您想要调用的函数。你应该使用$('html, body').stop()。

此外，animate部分引用变量slow。 jQuery的动画功能需要"slow"作为一个字符串，所以该行应该写成这样：因为我们要的"slow"一个字符串值传递给jQuery的动画功能

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

注意在报价的包容，而不是变量slow。

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

来源

2016-09-07 15:45:40 Quantastical

防止窗口滚动低于折叠，直到按钮点击

回答

相关问题