세로 및 가로 가운데와 자바 스크립트 스크롤에 문제가 있습니다.

나는 100 % 너비와 100 % 높이로 표시된 그림이되도록 웹 사이트를 가지고 있습니다. 창문. 이 버튼을 세로 및 가로 가운데에 배치하길 원하지만 시도하는 모든 것이 작동하지 않으며 스크롤 할 수없는 것 같습니다. 나는 어느 쪽의 문제에 대한 답을 취할 것이다. https://jsfiddle.net/cityFoeS/278dcyqg/세로 및 가로 가운데와 자바 스크립트 스크롤에 문제가 있습니다.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
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('http://www.wallpaperup.com/uploads/wallpapers/2013/05/16/86283/a5d366f61be34ae146c3acc00e288ade.jpg') no-repeat center center fixed; 
    height:100%; 
    width: 100%; 
    padding:20px; 
    box-sizing: border-box; 
} 
#reading { 
    height: 100%; 
    width: 100%; 
} 
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
function scrollWin() { 
    var h = window.innerHeight; 
    window.scrollTo(0, h); 
} 
</script> 
</head> 
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'> 
<body> 
<div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div> 
<div id="reading"></div> 
</body></html>

출처

2016-07-26 Anonymous

귀하의 문제는 onclick 부분에서 <div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div>

봐, 당신은 존재하지 않는 함수를 호출는 HTML입니다.

당신은 단지 올바른 함수 이름으로 변경할 수 있고 그것이 작동 것이다하지만 대신 가장 좋은 방법으로 바이올린을 만들었습니다 : https://jsfiddle.net/278dcyqg/1/

당신은 시도하고 실제 HTML 태그에 onclick을 사용하지 않도록하고한다 JavaScript를 통해 모든 이벤트를 처리하려고 시도하십시오.

출처

2016-07-26 18:59:01

나는 그것을 보았어 야합니다. 고맙습니다. –

세로 및 가로 가운데와 자바 스크립트 스크롤에 문제가 있습니다.

답변

관련 문제