Scroll down whole browser window

I am making a website and this is my current setup:

I have 2 main divs, at first the bold one is displayed in full browser window, and after clicking the button, whole window is scrolled down to the 2nd div. The divs are literally placed as in the picture, with the lower div being off screen and the scroll down function is a simple javascript.

My main question here is, can this be done in any alternative way? This feels kinda wrong, also whenever i'm at the lower div and resize the height of the browser window it all gets messed up.

EDIT:

I'd like to have it so that its impossible to scroll by any other means than just those buttons (no arrowkeys, no mouse wheel and preferably no pg down/up buttons). Is that even possible?

HTML buildup:

  <div id="wrapper">
  <div id = "overall"></div>
  <div id = "chat"></div>
  </div>

With "overall" being the bolded div on the image and "chat" being the lower one. There is plenty of other things i have placed inside of these divs, if you want the full code i can post it, but this is mostly about switching between these 2 only.

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

#wrapper {
  overflow-y: hidden;
  overflow-x: hidden;
}

#overall {
  background-color: red;
  height: 100%;
  width: 100%;
  text-align: center;
}

#chat {
  width: 100%;
  height: 100%; 
  overflow-x: hidden;
  overflow-y: hidden;
}

And the JS function that scrolls:

function scrollDown() {


    $('html, body').animate({
        scrollTop: $("#chat").offset().top
    }, 1000);

}



function scrollUp() {


    $('html, body').animate({
        scrollTop: $("#overall").offset().top
    }, 1000);
}

My knowledge level is low and i guess you can see i only understand the most basic stuff for now, so please explain your answers. Thanks for any help.

Solution

The key is using the CSS width:100% & height:100% properties. These will make sure your element is always sized to the full size of your browser. Even when you resize it.

$(document).ready(function() {
  $("#scroll-down").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: $("#block2").offset().top + 'px'
    }, 'slow');
  })
  $("#scroll-up").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: $("#block1").offset().top + 'px'
    }, 'slow');
  });
});

html,
body {
  height: 100%;
}
.full-size {
  display: block;
  width: 100%;
  height: 100%;
}
#block1 {
  background-color: red;
}
#block2 {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper full-size">
  <div class="full-size" id="block1">
    <a href="#block2" id="scroll-down">scroll down</a>
  </div>
  <div class="full-size" id="block2">
    <a href="#block1" id="scroll-up">scroll up</a>
  </div>
</div>

EDIT: included JS smoothscroll