코딩Coding/HTML_CSS_JavaScript연습
(HTML연습CSS)클릭시 페이지 최상단으로 이동하는 TOP버튼
내인생PLUS
2021. 11. 27. 09:29
728x90
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Working~~~</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<input class="goupbtn" type="button" value="Top" onclick="window.scrollTo(0,0);"></div>
</body>
</html>
style.css
.goupbtn {
padding: 3px 4px;
bottom: 4px;
right: 4px;
width: 38px;
height: 38px;
border-radius: 80%;
background-color: #ffffff;
border: red 4px solid;
position: fixed;
z-index: 1;
}
클릭시 페이지 최상단으로 이동하는 TOP버튼(자바스크립트)
보통 HTML 을 이용한 Top 버튼의 경우 > 과 같이 최 상단에 만들어 두고 TOP 와 같이 이용한다. 그냥 TOP을 이용하는 경우도 있는데 이 경우 주소의 제일 뒤에 #이 붙는다. http://sadtear.tistpry.com/# < 이런
velog.io
반응형