[JavaScript] top button, bottom button

2021. 2. 15. 23:11HTML&CSS&JavaScript

$(function() {  
  var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
  
  // 보이기 | 숨기기
  $(window).scroll(function() { 
    if ($(this).scrollTop() < 200) { 
    //200 넘으면 버튼이 보임 
     $('.top-button').fadeOut(),
       $('.bottom-button').fadeOut();  
  } else { 
    $('.top-button').fadeIn(),
      $('.bottom-button').fadeIn(); 
  } 
  }); 
  // 버튼 클릭시 0 까지 animation 이동
  $(".top-button").click(function() {
    $('html, body').animate({ 
      scrollTop : 0 }, 200); // 속도 200 
    return false; 
  }),
    $(".bottom-button").click(function() {
    $('html, body').animate({ 
      scrollTop : scrollBottom }, 200); // 속도 200 
    return false; 
  }); 

});