cityFoeS cityFoeS - 2 months ago 7x
HTML Question

problems with vertical and horizontal center and javascript scroll

I have a website in which I want there to be a picture that is as displayed at 100% width and 100% height with a button on it that scrolls the page the height of the window. I want this button to be centered vertically and horizontally but everything I try doesn't work and i cannot seem to get it to scroll either. I will take an answer for either problem.

<!DOCTYPE html>
html, body {
height: 100%;
width: 100%;
background: -webkit-linear-gradient(left top, black, #404040); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, black, #404040); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, black, #404040); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, black, #404040); /*Standard syntax (must be last) */
background-repeat: no-repeat;
background-attachment: fixed;

#start {
color: white;
background: url('') no-repeat center center fixed;
width: 100%;
box-sizing: border-box;
#reading {
height: 100%;
width: 100%;
</style><script src=""></script>
function scrollWin() {
var h = window.innerHeight;
window.scrollTo(0, h);
<link href='' rel='stylesheet' type='text/css'>
<div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div>
<div id="reading"></div>


Your problem is in the HTML, <div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div>

Look at the onclick part, you are calling a function that doesn't exist.

You could just change it to the correct function name and it would work but I have instead made a fiddle with the best practice:

You should try and avoid using onclick on the actual HTML tag, and try to handle all events through JavaScript