-
(HTML연습CSS)클릭시 페이지 최상단으로 이동하는 TOP버튼코딩Coding/HTML_CSS_JavaScript연습 2021. 11. 27. 09:29728x90
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
반응형'코딩Coding > HTML_CSS_JavaScript연습' 카테고리의 다른 글
AWS - EC2 기본 사용법 (0) 2023.03.02 html escape letters❤️Angle bracket(<) < / (>) >m(Some Useful HTML Character Entities (0) 2023.02.13 Full HTTP Networking Course – Fetch and REST APIs in JavaScript (0) 2023.02.05 AWS EC2 용량 증설(EBS 볼륨 확장) (0) 2023.02.02 HTML연습)Table만들기(표) (0) 2021.11.19 HTML Block and Inline Elements⭐⭐⭐ (0) 2021.11.14 [JS연습]object안에 funtion만들기 (0) 2021.11.05 [Vanilla JavaScript Calendar연습]Coding A Calendar App In Plain JavaScript (0) 2021.11.04