목차
scrollTo() 예제 - 지정 좌표로 이동 scrollTo() 정의 scrollTo() 구문 scrollTo() 예제 - 스크롤탑 버튼 (= 탑버튼)
scrollTo() 예제 - 지정 좌표로 이동
<style>
body {width:750px ;}
button {position: fixed;}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<p>홈페이지 제작관리 + 서버관리 + HTML CSS JS JQ PHP SQL BS</p>
<button onclick="scrollWin()">클릭</button><br><br>
<script>
function scrollWin() {
window.scrollTo(200, 0);
}
</script>
결과보기
PS. 이동 후, scrollWin 버튼 여러 번 클릭해도 더 이상 이동 안 함.
scrollTo() 정의
지정 좌표 지점으로 스크롤 이동.
1. cf.
scrollBy() 메서드 - 지정 거리만큼 여러 번 스크롤 이동 가능.
2.
모든 브라우저 지원.
3. 예제 더 보기
https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo
scrollTo() 구문
window.scrollTo(xpos, ypos )
[매개변수]
xpos
필수. 스크롤해서 도착할 x좌표 숫자. (px 단위 사용)
ypos
필수. 스크롤해서 도착할 y좌표 숫자. (px 단위 사용)
[반환값]
없음.
scrollTo() 예제 - 스크롤탑 버튼 (= 탑버튼)
1. <body> 태그 바로 아래에 아래 코드 추가
<button id="btnScrollToTop"><i class="fas fa-arrow-up"></i></button>
2. style 파일에 아래 코드 추가
#btnScrollToTop {
position: fixed;
right: 10px;
bottom: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #e76f51;
opacity: 0.7;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
color: white;
outline: 0;
cursor: pointer;
border: 0;
}
#btnScrollToTop:active {
opacity: 1;
}
3. </body> 태그 앞쪽에 아래 코드 추가
btnScrollToTop.addEventListener("click", function () {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
});
결과보기
