728x90
반응형
홈페이지나 모바일 웹뷰에서 기본적으로 많이 사용하는 TOP 버튼 클릭시, 상단으로 스크롤바 이동시키는 기능을 만들려고 한다.
jQuery를 덜어내는 작업 중, 순수 JavaScript에서 어떤 식으로 작성하는지 기록해보고자 한다.
jQuery를 이용한 스크롤 이동
- 윈도우 스크롤 이동시키기
$(window).scrollTop(0);- 애니메이션 효과 주면서 스크롤 이동시키기
$('html, body').animate({
scrollTop: 0
}, 200);
JavaScript를 이용한 스크롤 이동
- 윈도우 스크롤 이동시키기
window.scrollTop(0, 0);- 부드럽게 이동하는 애니메이션 효과를 지정하여 스크롤 이동시키기. behavior의 값에는 auto, instant, smooth가 있다.
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
※ 참고자료
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Window.scrollTo() - Web APIs | MDN
Window.scrollTo() scrolls to a particular set of coordinates in the document.
developer.mozilla.org
https://api.jquery.com/animate/#animate-properties-duration-easing-complete
.animate() | jQuery API Documentation
Description: Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one
api.jquery.com
320x100
반응형
'Devlog > JavaScript' 카테고리의 다른 글
| [JavaScript] script의 속성 async와 defer (0) | 2022.07.12 |
|---|---|
| [JavaScript] Promise 알아보기 (0) | 2022.06.29 |
| [JavaScript] Slick Slider 모바일 스크롤 시 autoplay 멈춤 현상 (0) | 2022.06.09 |
| [JavaScript/CSS] Slick Slider 오류 (0) | 2022.06.02 |
| [JavaScript] 변수와 상수 var, let, const (0) | 2022.05.24 |