umilove98의 블로그

페이지 맨 위로 스크롤 하고 싶다 ScrollToPlugin 본문

language,framework,library/Javascript

페이지 맨 위로 스크롤 하고 싶다 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
'language,framework,library/Javascript' Related Articles more