javascript - Prevent window scroll below fold until button click -
i have situation need page not scrollable past point (i have hero set 100vh , user should not able scroll @ all) , upon click of button scroll prevention disabled , user automatically smooth scrolled down anchor link directly below (basically scroll down 100vh or full window height). need smooth scrolling animation instead of quick jump.
i've tried playing around variations of following code no luck. far buggy , jumps around , when reload page body overflow set hidden window position not @ top of screen still see of below fold content still cant scroll.
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); }); };
fiddle here: https://jsfiddle.net/njpatten/yxkvnymu/1/
fixed code
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); });
fixed fiddle: https://jsfiddle.net/yxkvnymu/2/
explanation
you trying window height doing $('window').height()
searching 'window' dom element doesn't exist. want use $(window).height()
(note omission of quotes surrounding window) because window
not dom node, object.
in addition, using $('html, body').stop.animate({scrolltop: windowheight}, slow);
has multiple errors. .stop
invalid because stop
property on nodelist returned $('html, body')
function want call. should using $('html, body').stop()
.
also, animate
portion referencing variable slow
. jquery's animate function takes "slow"
string, line should written such:
.animate({scrolltop: windowheight}, "slow");
note inclusion of quotes on because want pass string value of "slow"
jquery's animate function, instead of variable slow
.
lastly, surrounding of code in anonymous function, seems unnecessary.
Comments
Post a Comment