[javaScript] Top버튼 스크롤 하단 붙이기

top button

 

Top버튼 스크롤 하단 붙이기

 

안녕하세요~

 

UI 모션 개발을 할 때,

컨텐츠가 긴 경우를 대비해서 보통 우측 하단에 상단으로 이동할 수 있는 일명 Top버튼을 많이 적용하고 있습니다.

 

Top버튼을 적용시킬 때 여러가지 기능이 있을 수 있습니다.

1. 단순히 우측하단에 Top버튼 위치시키기
2. 디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측 하단에 Top버튼 보이기
   - 단점 : 푸터와 겹치게 됨
3. 디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측하단에 Top버튼 보이기
   - 장점 : 푸터와 겹치지 않음
   - 단, 스크롤이 푸터에 닿기 전에 Top버튼은 푸터 바로위에 위치시키기

 

위의 3가지 경우 중에서

마지막 3번째 경우에 대한 모션구현을 해보았습니다.

 

디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측 하단에 Top버튼 보이기

윈도우 스크롤 발생할 때, top버튼 유/무를 넣기 위해 추가해줍니다.

$(window).scroll(function() {
	// 윈도우 스크롤 발생할 때, top버튼 유/무를 넣기 위해 추가
});

 

윈도우 scrollTop의 값에 대한 조건을 추가해줍니다.

- scrollTop() : 콘텐츠가 세로로 스크롤되는 픽셀 수를 가져오거나 설정

$(window).scroll(function() {
  if($(window).scrollTop() >= 10) {
    // 윈도우 scrollTop 값이 10이상일 때 노출
    // 10 대신 헤더값을 넣고, 헤더값 보다 이상 일 때를 넣어도 UI모션상 자연스러운 것 같습니다
  }else{
    // 윈도우 scrollTop 값이 10미만일 때 노출
  }
});

 

top버튼을 화면에 보여주기 위한 class를 추가해줍니다.

$(window).scroll(function() {
  if($(window).scrollTop() >= 10) {
    $(".btn_top").addClass("show_on");
    // top버튼을 화면에 보여주기 위한 class 추가
  }else{
    $(".btn_top").removeClass("show_on fixed_on");
  }
});

 

scrollBottom은 별도의 제이쿼리 API로 없기 때문에

문서의 스크롤 가장 끝 부분은 계산해서 넣어야 합니다.

 

윈도우 scrollTop + 윈도우 높이  = 문서의 스크롤 가장 끝

$(window).scroll(function() {
  if($(window).scrollTop() >= 10) {
    $(".btn_top").addClass("show_on");
    if($(window).scrollTop() + $(window).height() >= $(".footer").offset().top){
      $(".btn_top").addClass("show_on fixed_on");
      // '문서의 스크롤 가장 끝'이 '푸터 top위치'보다 클 때, fixed_on 클래스 추가
      // fixed_on : top버튼을 absolute로 변경하는 코드
    }else{
      $(".btn_top").removeClass("fixed_on");
      // '문서의 스크롤 가장 끝'이 '푸터 top위치'보다 크지 않으면,
      // 푸터에 닿지 않은 경우이므로 fixed_on 클래스 제거
    }
  }else{
      $(".btn_top").removeClass("show_on fixed_on");
      // 모두 해당하지 않는 경우, show_on, fixed_on 클래스 제거
  }
});

 

 

[최종 js 코드]

$(window).scroll(function() {
  if($(window).scrollTop() >= 10) {
    $(".btn_top").addClass("show_on");
    if($(window).scrollTop() + $(window).height() >= $(".footer").offset().top){
      $(".btn_top").addClass("show_on fixed_on");
    }else{
      $(".btn_top").removeClass("fixed_on");
    }
  }else{
    $(".btn_top").removeClass("show_on fixed_on");
  }
});

 

[최종 화면]

See the Pen Top버튼 scroll 하단 붙이기 by yeony (@yeony1011) on CodePen.

 

 

유익하셨다면,

채널 추가 / 블로그 구독 / 공감 부탁드려요 🙏