JQuery

[JQuery] 스크롤 여부 확인 hasScrollBar() / 스크롤 이동 scrollTop() / 스크롤 애니메이션 animate()

chsr 2020. 5. 12. 16:46
728x90
반응형

■ JQuery 스크롤 여부 확인 hasScrollBar() / 스크롤 이동 scrollTop() / 스크롤 애니메이션 animate()

<div id="scrollDiv"></div>

<script type="text/javascript">
  // 스크롤 여부 (true of false) 
  $.fn.hasScrollBar = function() {
    return (this.prop("scrollHeight") == 0 && this.prop("clientHeight") == 0) || (this.prop("scrollHeight") > this.prop("clientHeight"));
  };

  // 스크롤 존재할 경우 제일 하단으로 이동
  if( $("#scrollDiv").hasScrollBar() ){
   $("#scrollDiv").scrollTop($(document).height());
  }

  // 스크롤 이동 (최상단)
  $("#scrollDiv").scrollTop(0);   
  
  // 스크롤 이동 (최하단)
  $("#scrollDiv").scrollTop($(document).height());
  
  // 스크롤 이동 (최상단) - 400 = 0.4초동안 이동
  $('html, body').animate({'scrollTop': 0},400);
 </script>
728x90
반응형