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

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -