페이지 상단으로 스크롤 하는 버튼을 하단으로 이동하게 바꾸는 방법

현재 스크립트는 아래와 같습니다. 

 

Copy
const goTop = document.querySelectorAll(".at-go .go-top");

 

    goTop.forEach(function(go) {

        go.addEventListener("click", function(e) {

            e.preventDefault();

            let scrollInterval = setInterval(function() {

                let scrollTop =  window.scrollY;

 

                if(scrollTop > 0){

                    window.scrollBy(0, -55);

                } else {

                    clearInterval(scrollInterval);

                }

            }, 15);

        });

    });

 

이 스크립트의 어느부분을 바꾸면 페이지 최하단으로 이동하게 만들수 있을까요?

답변 3개

 if(scrollTop > 0){ <== 이게 있으니 window.scrollBy과 이별하지 못하고 계속 실행 상태로 있기 때문입니다

(아래로 내리면 언제나 스크롤 값이 0보다 큰 상태이니까요) 

 

 if(scrollTop > 0) 을 다음처럼 바꾸세요

 if(Math.round(scrollTop) < document.body.scrollHeight - window.innerHeight ){

 

저런 복잡한 스크립트 없이 간단히 한 줄만 해도 될 것을....

document.body.scrollTop = 10000; 

 

그런데 .go-top <==이 버튼이 여러개 인가요?

한개만 있다면 저렇게 하는 것이 아니라 다음처럼 간단히....

go = document.querySelector(".go-top");
go.addEventListener("click", function(e) {

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy
const goTop = document.querySelectorAll(".at-go .go-top");
 
    goTop.forEach(function(go) {
        go.addEventListener("click", function(e) {
            e.preventDefault();
            let scrollInterval = setInterval(function() {
                let scrollTop =  window.scrollY;
 
                // if(scrollTop > 0){
                //     window.scrollBy(0, -55);
                if(scrollTop < document.documentElement.scrollHeight - window.innerHeight){
                    window.scrollBy(0, 55);
                } else {
                    clearInterval(scrollInterval);
                }
            }, 15);
        });
    });
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

-55 부분을 양수로 처리하면 아래로 내려갑니다.

https://homzzang.com/b/js-1769 참고해 보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

양수로 처리하니 스크롤 내려간 후 다시 스크롤을 올려도 하단으로 계속 고정이 되네요..

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고