<!DOCTYPE HTML>
<html>
<head>
<style>
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#matrix {
width: 400px;
margin: auto;
overflow: auto;
text-align: justify;
}
#arrowTop {
height: 9px;
width: 14px;
color: green;
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
}
#arrowTop::before {
content: '▲';
}
</style>
<meta charset="utf-8">
</head>
<body>
<div id="matrix">
<script>
for (let i = 0; i < 2000; i++) document.writeln(i)
</script>
</div>
<div id="arrowTop" hidden></div>
/*should be hidden until given condition is satified*/
<script>
arrowTop.onclick = function() {
window.scrollTo(pageXOffset, 0);
};
window.addEventListener('scroll', function() {
arrowTop.hidden = (pageYOffset < document.documentElement.clientHeight);
//if scrolled page becomes bigger than clientHeight
});
</script>
</body>
</html>
<html>
<head>
<style>
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#matrix {
width: 400px;
margin: auto;
overflow: auto;
text-align: justify;
}
#arrowTop {
height: 9px;
width: 14px;
color: green;
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
}
#arrowTop::before {
content: '▲';
}
</style>
<meta charset="utf-8">
</head>
<body>
<div id="matrix">
<script>
for (let i = 0; i < 2000; i++) document.writeln(i)
</script>
</div>
<div id="arrowTop" hidden></div>
/*should be hidden until given condition is satified*/
<script>
arrowTop.onclick = function() {
window.scrollTo(pageXOffset, 0);
};
window.addEventListener('scroll', function() {
arrowTop.hidden = (pageYOffset < document.documentElement.clientHeight);
//if scrolled page becomes bigger than clientHeight
});
</script>
</body>
</html>
댓글
댓글 쓰기