垂直和水平中心和javascript滚动的问题

Question

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. 我有一个网站，我希望在那里有一个100％宽度和100％高度显示的图片，上面有一个按钮，滚动页面窗口的高度。 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. 我会回答任何一个问题。 https://jsfiddle.net/cityFoeS/278dcyqg/ 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>

Answer 1

Your problem is in the HTML, <div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div> 您的问题出在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. 查看onclick部分，您正在调用一个不存在的函数。

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: https://jsfiddle.net/278dcyqg/1/ 您可以将其更改为正确的函数名称，它可以工作，但我已经做了一个小提琴最佳实践： https ： //jsfiddle.net/278dcyqg/1/

You should try and avoid using onclick on the actual HTML tag, and try to handle all events through JavaScript 您应该尝试避免在实际的HTML标记上使用onclick ，并尝试通过JavaScript处理所有事件

垂直和水平中心和javascript滚动的问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-26 18:59:01

垂直和水平中心和javascript滚动的问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-26 18:59:01

解决方案1
0 已采纳 2016-07-26 18:59:01