| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- html
- 스크롤
- Node.js
- 라이브러리
- 일본어
- Algorithm
- React
- prettier-code formatter
- 네트워킹
- quizlet
- JLPT
- 백준
- 함수
- 연습문제
- java
- ScrollToPlugin
- scrolly
- 데이터통신
- 초연결사회의 데이터통신과 네트워킹
- 단어장
- reactjs code snippets
- ArrayList
- gsap
- 자바스크립트
- 알고리즘
- 초연결 사회의 데이터통신과 네트워킹
- JavaScript
- 한빛아카데미
- 자바
- 이벤트
- Today
- Total
umilove98의 블로그
페이지 맨 위로 스크롤 하고 싶다 ScrollToPlugin 본문
페이지 맨 위로 스크롤 하고 싶다 ScrollToPlugin
umilove98 2022. 10. 21. 23:23웹 페이지를 보다보면 맨 위로 스크롤 해주는 버튼이 아래쪽에 위치해 있는 것을 볼 수 있다.
이를 편하게 구현할 수 있게 해 주는 라이브러리 gsap의 ScrollToPlugin이 있다.
gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! No other library delive
cdnjs.com
해당 웹 사이트로 이동하여
스크롤을 조금 아래로 내리면 화면에 보이는 버튼을 눌러 코드를 복사한다.
복사한 코드를 해당 라이브러리를 사용하고자 하는 html문서의 <head>부분에 붙여넣어 작성한다.
이 때, 자신이 직접 작성중인 자바스크립트 파일보다 위쪽에 작성한다.
const toTopEl = document.querySelector('#to-top'); // 먼저 html 파일에 to-top이라는 id로 생성해둔 버튼요소를 가져온다.
toTopEl.addEventListener('click', function(){ // 해당 버튼을 클릭했을 경우 동작시킬 함수를 작성한다.
gsap.to(window, 0.7, { // gsap의 사용방법
scrollTo: 0 // 이 옵션을 사용하기 위해 ScrollToPlugin을 추가한 것.
});
});아래 내용과 같이 특정 버튼을 클릭하면 화면의 0지점까지 스크롤하도록 이벤트를 만들 수 있다.
'language,framework,library > Javascript' 카테고리의 다른 글
| Arrow function => (0) | 2022.10.29 |
|---|---|
| node.js 버전을 여러가지 관리하며 사용하고 싶다. NVM (0) | 2022.10.21 |
| gsap 자바스크립트로 애니메이션 효과 적용하기 (0) | 2022.10.13 |
| window.scrollY 화면의 스크롤 위치를 이용하여 이벤트 처리하기 (0) | 2022.10.13 |
| lodash.js 이벤트 발생 시 함수 실행 빈도를 조절해보자 (0) | 2022.10.12 |
