Hello and good evening.

I'm trying to make scrolling impossible upon reaching a certain div, and making it possible again after another. Problem is between those I want to move between divs through anchors.

Let's say this is my html:

<div id="plano1" class="plano">
<div id="plano2" class="plano">
<div id="plano3" class="planoslide"><a href="#plano4"><button onclick="enableScroll()"><a>
<div id="plano4" class="planoslide"><a href="#plano5"><button onclick="enableScroll()"><a>
<div id="plano5" class="plano">

I want to make scrolling disabled upon entering the class .planoslide. I have two functions which add or remove the class .stop-scrolling which has the usual height:100% and overflow:hidden. The funcion disableScroll is activated upon entering the planoslide class but it stops dead in its tracks either mid heigh, or if I scroll to much even after it. So I had to animate it almost upon entering the div so that offsets to the right place. Right now this is my code:

function disableScroll() {
$('body').addClass('stop-scrolling');
$('body').bind('touchmove', function(e){e.preventDefault()})
}

function enableScroll() {
$('body').removeClass('stop-scrolling');
$('body').unbind('touchmove');
}

$(window).bind('scroll', function() {
  if($(window).scrollTop() >= ($('.planoslide').offset().top + $('.planoslide').outerHeight() - window.innerHeight)*0.1) {
    disableScroll();
    $('html,body').animate({
      scrollTop: $(".planoslide").offset().top},
      2000);
  }
}); 

Problem is when i use the button with onclick to enable the scroll again nothing happens. I wished it would not only enable the scroll back again but navigate to the supposed ID I send it to.

Also the first enableScroll should enable it and disable again upon entering the new .planoslide, but that one I haven't gotten to yet.

Help would be much aprecciated.

Best regards.