모바일 스크롤 하단 버튼 부드럽게 나타내는 방법 (CSS + JavaScript)

모바일 웹에서 유용한 ‘하단 고정 버튼’을 스크롤 시 버튼 노출이 자연스럽게 나타났다 사라지게 만드는 방법을 소개합니다. CSS와 JavaScript만으로 구현하며, 사용자 경험을 향상시킬 수 있는 깔끔한 UI 팁입니다.

스크롤 시 버튼 노출 소스코드들

데모 실행

데모 실행 결과

HTML 구조

<div class="list-top-btns">
  <button type="button">✅ 전체선택</button>
  <button type="button">❎ 전체선택해제</button>
</div>

<div class="floating-btns">
  <button type="button">✅ 전체선택</button>
  <button type="button">❎ 전체선택해제</button>
</div>

<div class="list-top-btns">
  <button type="button">✅ 전체선택</button>
  <button type="button">❎ 전체선택해제</button>
</div>

<div class="floating-btns">
  <button type="button">✅ 전체선택</button>
  <button type="button">❎ 전체선택해제</button>
</div>

HTML

.list-top-btns : 목록 상단 버튼 영역
.floating-btns : 하단 고정 버튼 영역
목록 상단 버튼 영역이 화면에서 사라지면 하단 고정 버튼 영역이 서서히 나타나게 됨

CSS : 서서히 나타났다 사라지는 효과

.floating-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(0 0 0 / 10%);
  backdrop-filter: blur(7px);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 1000;
}

.floating-btns.visible {
  opacity: 1;
  pointer-events: auto;
}

.floating-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(0 0 0 / 10%);
  backdrop-filter: blur(7px);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 1000;
}

.floating-btns.visible {
  opacity: 1;
  pointer-events: auto;
}

CSS

background-color : 검정색 배경에 투명도 10%
backdrop-filter : 반투명 blur 효과
pointer-events : 보이지 않을 때 클릭 방지
opacity : 투명도 0%로 안보이게 처리
transition : 서서히 나타나고 사라지는 효과 주기

JavaScript : 버튼이 사라지는 걸 감지

const header = document.querySelector(".list-top-btns");
const floatingNav = document.querySelector(".floating-btns");

const observer = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      // 헤더가 보일 때 → 플로팅 네비 숨기기
      floatingNav.classList.remove("visible");
    } else {
      // 헤더가 안 보일 때 → 플로팅 네비 보이기
      floatingNav.classList.add("visible");
    }
  },
  { threshold: 0 } // 헤더가 한 픽셀이라도 보이면 isIntersecting = true
);

observer.observe(header);

const header = document.querySelector(".list-top-btns");
const floatingNav = document.querySelector(".floating-btns");

const observer = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      // 헤더가 보일 때 → 플로팅 네비 숨기기
      floatingNav.classList.remove("visible");
    } else {
      // 헤더가 안 보일 때 → 플로팅 네비 보이기
      floatingNav.classList.add("visible");
    }
  },
  { threshold: 0 } // 헤더가 한 픽셀이라도 보이면 isIntersecting = true
);

observer.observe(header);

JavaScript

.list-top-btns 영역이 화면에 사라지고 나타나는지 감지
상단 버튼 영역이 사라지면, .floating-btns에 .visible 추가
상단 버튼 영역에 나타나면, .floating-btns에 .visible 제거

마무리

모바일에서 스크롤 시 버튼 노출을 자연스럽게 처리하기 위해 CSS + JavaScript를 활용한 예제 코드를 확인해 봤습니다. 해당 페이지에서 데모도 구현해 봤습니다. 조금 어수선하네요 ^^; 기본 기능이 어떤지 이해하시면 커스텀은 얼마든지 가능해 보입니다.

👉 관련 포스팅 : SWAL 사용법! SweetAlert2 예쁜 팝업 정복하기
👉 관련 포스팅 : 유튜브 Shorts 자동 플레이 슬라이드(Swiper) 적용 방법
👉 관련 포스팅 : 자바스크립트 마우스 관련 이벤트
👉 관련 포스팅 : CSS position:sticky 스크롤시 왼쪽 고정
👉 관련 포스팅 : JavaScript 클립보드 복사 예제

LG전자 27US550 68.4cm IPS 4K UHD 60Hz 피벗 틸트 스위블 엘리베이션

LG전자 FHD IPS 모니터, 80.4cm, LG_32MN500MW 화이트

한성컴퓨터 FHD IPS 144Hz 게이밍 모니터, 68.6cm, TFG27F14P2(일반)

아즈텍 모니터 240Hz 게이밍 AZT324G 80~81cm(32인치) 무결점, 무결점(AZT324G), 80.1cm

[깜짝세일] 뷰싱크 FHD 광시야각 리얼 100Hz 올화이트 모니터, VSO321F 일반, 80cm

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”