向下滚动整个浏览器窗口

我正在建立一个网站，这是我当前的设置：

http://puu.sh/hU5KJ/421b5aa76d.png

我有2个主要div，首先，粗体显示在整个浏览器窗口中，然后单击按钮，然后将整个窗口向下滚动到第二个div。div的字面位置如图片所示，较低的div不在屏幕上，向下滚动功能是一种简单的javascript。

我的主要问题是，这可以通过其他替代方式吗？这感觉有点不对劲，每当我在较低的div并调整浏览器窗口的高度时，这一切都会搞砸了。

编辑：

我想拥有它，以使其无法通过除那些按钮之外的任何其他方式滚动（没有箭头键，没有鼠标滚轮，并且最好没有pg向下/向上按钮）。那有可能吗？

HTML累积：

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

“ overall”是图像上的粗体div，“ chat”是下部的div。我在这些div中放置了许多其他内容，如果您希望我可以发布完整的代码，但这主要是关于仅在这两个之间进行切换。

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;
}

和滚动的JS函数：

function scrollDown() {


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

}



function scrollUp() {


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

我的知识水平很低，我想您可以看到我目前仅了解最基本的知识，因此请解释您的答案。谢谢你的帮助。