페이지 상단으로 스크롤 하는 버튼을 하단으로 이동하게 바꾸는 방법
현재 스크립트는 아래와 같습니다.
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개 / 댓글 1개
2024-07-26 (금) 00:54:26
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) {
2024-07-25 (목) 23:50:24
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);
});
});
sinbi-55 부분을 양수로 처리하면 아래로 내려갑니다.
https://homzzang.com/b/js-1769 참고해 보세요.
답변에 대한 댓글 1개
2024-07-25 (목) 23:01:07
양수로 처리하니 스크롤 내려간 후 다시 스크롤을 올려도 하단으로 계속 고정이 되네요..
답변을 작성하려면 로그인이 필요합니다.