縦と横の中心とJavaScriptのスクロールに問題がある

私はそこに100％の幅と100％の高さで表示されているような写真を、窓。私はこのボタンを縦と横の中央にしたいが、私が試してみるとうまくいかないので、それをスクロールすることができない。私はどちらの問題についても答えを出します。 https://jsfiddle.net/cityFoeS/278dcyqg/縦と横の中心とJavaScriptのスクロールに問題がある

<!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

あなたの問題は、HTMLであるonclick一部で<div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div>

見て、あなたは存在しない関数を呼び出しています。

あなただけの正しい関数名にそれを変更することができますし、それが働くだろうが、私は代わりに、ベストプラクティスとフィドルをした： https://jsfiddle.net/278dcyqg/1/

あなたがしようとすると、実際のHTMLタグにonclickの使用を避けるべきであり、 JavaScriptを使用してすべてのイベントを処理してください。

出典

2016-07-26 18:59:01

私はそれを見たことがあります、ありがとうございます。 –

縦と横の中心とJavaScriptのスクロールに問題がある

答えて

関連する問題