Jam's story

[javascript] 스크롤 올리기 본문

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>
Insert title here (#top>{Top})+(h3>{css 배경이미지})+lorem+p*50>{.}
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!

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

저작자표시

'WEB > JavaScript' 카테고리의 다른 글

[JS] 의사클래스 풍선도움말  (0) 2022.05.24
[JavaScript] 버튼누르면 보이게 하기  (0) 2022.05.23
[JS][Jquery] 스크립트를 이용해서 동적인 버튼 만들기 +버튼 누르면 버튼10개 생성  (0) 2022.05.23
[JavaScript] 모든 a 링크 태그의 active 속성 제거 , 클릭한 것만 주기  (0) 2022.05.23
[JavaScript] 버튼 눌러서 숨기기 보이기  (0) 2022.05.17
'WEB/JavaScript' Related Articles more
Comments