Если я вас правильно понял то вот:
<!DOCTYPE HTML>
<html>
<head>
<style>
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#matrix {
width: 400px;
margin: auto;
overflow: auto;
text-align: justify;
}
#updown {
height: 50px;
width: 100%;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
background: #3498DB;
}
#updown.up {
width: 100%;
height: 50px;
background: #ccc;
}
.gg {
width: 100%;
height: 200px;
border-bottom: 1px solid #f00;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div class="gg"></div>
<div id="matrix">
<script>
for (var i = 0; i < 2000; i++) document.writeln(i)
</script>
</div>
<div id="updown">
<div id="menu"></div>
</div>
<script>
var updownElem = document.getElementById('updown');
var pageYLabel = 0;
updownElem.onclick = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
switch (this.className) {
case 'down':
window.scrollTo(0, pageYLabel);
this.className = 'up';
}
}
window.onscroll = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
var innerHeight = 200; // кол-во пикселей вниз
switch (updownElem.className) {
case '':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
case 'up':
if (pageY < innerHeight) {
updownElem.className = '';
}
break;
}
}
</script>
</body>
</html>
Простой
