Prevent window scroll below fold until button click

Question!

I have a situation where I need the page to not be scrollable past a certain point (I have the hero set to 100vh and the user should not be able to scroll at all) and then upon click of a button the scroll prevention is disabled and the user is then automatically smooth scrolled down to an anchor link directly below (basically scroll down 100vh or the full window height). I need a smooth scrolling animation instead of just a quick jump.

I've tried playing around with variations of the following code with no luck. So far it is really buggy and jumps around and when you reload the page the body overflow is set to hidden but the window position is not always at the top of the screen so you still see some of the below the fold content but 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 is here: https://jsfiddle.net/njpatten/yxkvnymu/1/

By : njpatten


Answers

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 are trying to get the window height by doing $('window').height() which is searching for a 'window' DOM element which doesn't exist. You want to use $(window).height() (note the omission of quotes surrounding window) because window is not a DOM node, it is an object.

In addition, you are using $('html, body').stop.animate({scrollTop: windowHeight}, slow); which has multiple errors. .stop is invalid because the stop property on the NodeList that is returned from $('html, body') is a function that you want to call. You should be using $('html, body').stop().

Also, the animate portion is referencing a variable slow. jQuery's animate function takes "slow" as a string, so that line should be written as such:

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

Note the inclusion of quotes on that because we want to pass a string value of "slow" to jQuery's animate function, instead of a variable slow.

Lastly, you are surrounding all of your code in an anonymous function, which seems unnecessary.



When an arrow function has more than one statement you can no longer use the implicit return syntax.

Add block braces and a return statement:

array.map((element, index) => {
  let disturbingVariable = 100 + index
  return <MyComponent disturbingVariable={disturbingVariable} />
})

Alternatively, forgo the variable declaration and perform the addition in-place, maintaining the implicit return:

array.map((element, index) =>
  <MyComponent disturbingVariable={100 + index} />)
By : sdgluck


Alternatively, you could omit return and block braces, but the function body should be one liner with implicit return:

render() {
  return(
    <div>
      {array.map((element, index) => <MyComponent disturbingVariable={100 + index}/>)}
    </div>
  )
}

More about implicit return here

By : leo


This video can help you solving your question :)
By: admin