Scroll relative to device size - html

Question

I am making a site where you can click on a button and it will scroll you down to the information below. My issue is that the size of the opening screen is relative to the device screen. That means that a fixed scroll can be too far or not far enough on different devices. In summary my question is: how do i jump the exact device sreen height?
Here is my code:`
<div id='textPage1'>
<div id='leesMeer'>
<a href="#page2" class='leesMeer'type="button" value='Lees Meer'>LEES MEER</a>
</div>
</div>
<div id='page2'>
<div id='textPage2'>
<p>hi</p>
</div>
</div>
And my css:
#textPage1 {
float: right;
margin-right: 100px;
z-index: -1;
}
#beschrijving {
font-family: agency;
font-size: 20px;
color: #f2f2f2;
letter-spacing: 2px;
transform: scale(1, 1.1);
line-height: 30px;
z-index: 1;
margin-left: 50px;
}
.leesMeer {
font-family: agency;
font-size: 30px;
color: #f2f2f2;
border: 5px solid #f2f2f2;
border-radius: 15px;
padding: 12px 40px 12px 40px;
text-decoration: none;
-webkit-transition-duration: 0.5s;
position: absolute;
}

Answer 1

You can use Javascript to specify the scroll down like this example:
HTML:
<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<div class="second" id="second">Hi</div>
CSS:
.first {
width: 100%;
height: 1000px;
background: #ccc;
}
.second {
width: 100%;
height: 1000px;
background: #999;
}
Javascript:
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
here is the code in jsfiddle http://jsfiddle.net/rjSfP/