페이지 상단으로 스크롤 하는 버튼을 하단으로 이동하게 바꾸는 방법
본문
현재 스크립트는 아래와 같습니다.
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) {
양수로 처리하니 스크롤 내려간 후 다시 스크롤을 올려도 하단으로 계속 고정이 되네요..
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);
});
});
답변을 작성하시기 전에 로그인 해주세요.