[JS] Uncaught typeError: Failed to execute 'scrollTo' on 'window': the provided value is not of type 'scrollToOptions'. 해결방법
1. 발생 에러
gsap으로 scrollTo를 이용하여 페이지 하단에서 위로 화살표를 클릭하면 자동으로 최상단으로 스크롤이 되는 기능을 개발하다가 다음과 같은 에러가 발생했다.
2. 코드
에러가 발생한 코드 부분은 다음과 같다
먼저 HTML 코드는 다음과 같다.
<head>
<!-- GSAP & ScrollToPlugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollToPlugin.min.js" integrity="sha512-7DWrlu5tqVVJlJ8Bo5sYcs45ZDyI0givp3xMQcf2dC76IkU5eap8/yCjoEtBWU+tUYCsbOBQ5RyAGnuq7ZZI0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js" integrity="sha512-kVlGhj2qFy+KBCFuvjBJTGUMxbdqJKs4yK2jh0e0VPhWUPiPC87bzm4THmaaIee3Oj7j6sDpTTgm2EPPiESqBg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="to-top">
<div class="material-icons">arrow_upward</div>
</div>
</body>
css코드 다음과 같다.
#to-top{
width: 42px;
height: 42px;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
}
js코드는 다음과 같다.
const toTopEl = document.querySelector('#to-top');
toTopEl.addEventListener('click', function () {
gsap.to(window, .7, {
scrollTo: 0
});
});또 .... 혹시나 오타인가 해서 찾아봤지만, 오타를 발견할 수 없었다.
2. 해결 방법
검색을 해보니까 ScrollToPlugin을 로드 하지 않았다고만 나왔다. 나는 분명 html코드에서 link태그로 플러그인을 가져왔는데....!!! 코드에 다 적었는데!!!!!
그래서 이 페이지에서 가르쳐준 https://greensock.com/docs/v3/Installation?checked=core,scrollTo 로 들어가 보았다.
분명 https://cdnjs.com/libraries/gsap 에서 제공하는 태그보다 간단한 것을 제외하면 다른 것이 없다고 생각했다. 그런데... 문서마다 gsap.min.js가 먼저 있고 ScrollToPlugin.min.js가 나중에 있길래 혹시나 하는 마음으로 script태그 순서를 바꾸어 보았다.
<head>
<!-- GSAP & ScrollToPlugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js" integrity="sha512-kVlGhj2qFy+KBCFuvjBJTGUMxbdqJKs4yK2jh0e0VPhWUPiPC87bzm4THmaaIee3Oj7j6sDpTTgm2EPPiESqBg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollToPlugin.min.js" integrity="sha512-7DWrlu5tqVVJlJ8Bo5sYcs45ZDyI0givp3xMQcf2dC76IkU5eap8/yCjoEtBWU+tUYCsbOBQ5RyAGnuq7ZZI0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="to-top">
<div class="material-icons">arrow_upward</div>
</div>
</body>정말 허무하게도.... 정상적으로 작동이 되었다.
link태그의 순서가 문제였다. 먼저 gsap.min.js를 읽고 그 밑의 기능인 ScrollToPlugin.min.js를 실행해야 하는 것 같다...
혹시나 같은 문제를 겪었다면, gsap을 가져오는 link 태그의 순서를 잘 살펴보기를 바란다.
참고
https://github.com/greensock/GSAP/issues/57
https://cdnjs.com/libraries/gsap
https://greensock.com/docs/v3/Installation?checked=core,scrollTo