backtotop 버튼을 연속으로 여러번 사용할때 스크롤이 끝까지 안올라갈 때가 생깁니다.

안녕하세요. 답변 도우미입니다.

관련 부분은 각각의 스크롤 기능을 어떻게 구현했느냐에 따라, 그 대응책이 다를 것 같은데요. 우선은 저희가 작성한 코드를 기반으로, 가볍게 대응 방안으로 고려할 수 있는 부분들을 이야기드리겠습니다.

### 1. 스크롤 애니메이션 중복 실행 방지

연속 클릭으로 인한 중복 스크롤 애니메이션 실행을 방지하기 위해, 애니메이션이 진행 중임을 나타내는 플래그(flag) 변수를 사용할 수 있습니다. 애니메이션이 시작될 때 이 변수를 true로 설정하고, 애니메이션이 완료되면 false로 설정하여 추가 클릭에 의한 애니메이션 재시작을 방지합니다.

### 2. 스크롤 이벤트 최적화

scroll 이벤트는 매우 빈번하게 발생할 수 있으므로, 이를 효율적으로 처리하기 위해 requestAnimationFrame을 사용하는 것이 좋습니다. 이를 통해 브라우저의 리플로우(reflow)와 리페인트(repaint)를 최적화하여 성능을 개선할 수 있습니다.

### 개선된 코드 예시

```javascript

const backToTop = document.getElementById('backtotop');

let isScrolling = false; // 스크롤 중복 방지를 위한 플래그

const checkScroll = () => {

let pageYOffset = window.pageYOffset;

if (pageYOffset !== 0) {

backToTop.classList.add('show');

} else {

backToTop.classList.remove('show');

}

}

const moveBackToTop = () => {

if (window.pageYOffset > 0 && !isScrolling) { // 현재 스크롤 중이 아닐 때만 실행

isScrolling = true; // 스크롤 시작

window.scrollTo({ top: 0, behavior: "smooth" });

// 스크롤 애니메이션 완료 후 isScrolling 리셋

let checkIfScrollFinished = setInterval(function() {

if (window.pageYOffset === 0) {

isScrolling = false; // 스크롤 완료

clearInterval(checkIfScrollFinished);

}

}, 100); // 100ms 간격으로 체크

}

}

// 스크롤 이벤트 최적화

let lastKnownScrollPosition = 0;

let ticking = false;

window.addEventListener('scroll', function(e) {

lastKnownScrollPosition = window.scrollY;

if (!ticking) {

window.requestAnimationFrame(function() {

checkScroll(lastKnownScrollPosition);

ticking = false;

});

ticking = true;

}

});

backToTop.addEventListener('click', moveBackToTop);

```

### 코드 설명

- 중복 실행 방지: isScrolling 변수를 사용하여 스크롤 애니메이션이 진행 중일 때는 추가 애니메이션을 시작하지 않도록 합니다.

- 스크롤 이벤트 최적화: requestAnimationFrame을 사용하여 스크롤 이벤트 처리를 최적화합니다. 이는 스크롤 이벤트가 너무 많이 발생하는 것을 방지하고, 브라우저가 다른 작업을 수행할 때 성능 저하를 막기 위함입니다.

- 애니메이션 완료 체크: 스크롤 애니메이션이 완료되었는지를 주기적으로 체크하여, 완료 시 isScrolling 플래그를 리셋합니다. 이를 통해 사용자가 다시 클릭할 수 있도록 합니다.

이러한 개선을 통해 연속 클릭에 의한 문제를 방지하고, 스크롤 관련 성능을 개선할 수 있습니다.