WEB/JavaScript
[javascript] 스크롤 올리기
애플쩀
2022. 5. 20. 10:47
<script>
function top_click() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
/* background-image: url('../images/img_tree.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
*/
/* 배경 약식순서:color image repeat attachment position */
background: white url('../images/img_tree.png') no-repeat fixed right top;
/* background: red;
background-color: red; 둘다 가능 */
}
</style>
<style type="text/css">
#top{
border: 1px solid gray;
border-width: 1px;
border-style: solid;
border-color: gray;
width:25px;
height: 25px;
position: fixed;
right:5px;
bottom:5px;
}
#top:hover{
background-color: black;
color:yellow;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
(#top>{Top})+(h3>{css 배경이미지})+lorem+p*50>{.}
<div id="top" onclick="top_click();">Top</div>
<h3>css 배경이미지</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quidem odit eaque fugit doloribus sint dolorum id iusto assumenda dolorem numquam
sequi impedit minus delectus ea placeat harum fuga repudiandae repellat!
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<script>
function top_click() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>Top
css 배경이미지
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem odit eaque fugit doloribus sint dolorum id iusto assumenda dolorem numquam sequi impedit minus delectus ea placeat harum fuga repudiandae repellat!.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.