JQuery

[HTML_CSS] JQ - scrollTop() 메서드 ★ - 선택요소 세로 스크롤바 위치 설정/반환 (= scrollTop메서드 = 스크롤탑메서드 = 스크롤톱메서드) ※ 스크롤 스파이 ※스크롤 클래스토글 ※ 스크롤 맨하단으로 이동

목차

  1. scrollTop() 예제 - 선택요소 세로 스크롤바 위치 반환
  2. scrollTop() 정의
  3. scrollTop() 구문
  4. scrollTop() 예제 - 특정 세로 좌표로 이동
  5. scrollTop() 예제 - 스크롤 배경색 변경 (= 스크롤 클래스 토글)
  6. scrollTop() 예제 - 지정요소의 스크롤 맨하단으오 이동
  7. 스크롤스파이 - 스크롤 높이에 따라 보이기/숨기기
  8. 링크 클릭해 특정 수직좌표로 스크롤 이동

 

scrollTop() 예제 - 선택요소 세로 스크롤바 위치 반환


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("div").scrollTop() + " px");

  });

});

</script>

 

<style>

div {border:1px solid black;width:100px;height:150px;overflow-y:scroll}

</style>

 

<div>홈짱닷컴 Homzzang.com홈짱닷컴 Homzzang.com홈짱닷컴 Homzzang.com홈짱닷컴 Homzzang.com홈짱닷컴 Homzzang.com홈짱닷컴 </div>


<button>클릭</button>

 

결과보기 

 

scrollTop() 정의


선택된 요소의 수직적 스크롤바 위치 반환/설정.

 



1.
스크롤바가 꼭대기에 있을 때, position 값은 0


2.
값 
반환 경우: 처음 일치하는 요소
값 설정 경우: 모든 일치하는 요소 

 

 

scrollTop() 구문


$(selector).scrollTop(position)

 


[매개변수]

 

position

스크롤바 수직위치를 반환. (픽셀단위)

 

 

scrollTop() 예제 - 특정 세로 좌표로 이동

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").scrollTop(100);

  });

});

</script>


<style>

div {border:1px solid black;width:100px;height:150px;overflow:auto}

</style>


<div>

홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com

</div><br>


<button>클릭</button>


결과보기

 

scrollTop() 예제 - 스크롤 배경색 변경 (= 스크롤 클래스 토글)

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

  $(window).scroll(function() {

    if ($(document).scrollTop() > 100) {

      $("p").addClass("hz");

    } else {

      $("p").removeClass("hz");

    }

  });

});

</script>


<style>

.hz {background-color: yellow;}

</style>


<body style="height:2000px;">

    <p style="position:fixed;">홈짱닷컴 Homzzang.com</p>

</body>

 

결과보기


scrollTop() 예제 - 지정요소의 스크롤 맨하단으오 이동

 

<script src="https://code.jquery.com/jquery-latest.js"></script>


<textarea style="height:200px" id="hz">...</textarea>


<script>

$(document).ready(function(){

  var hzHeight = $("#hz").prop('scrollHeight');

  $("#hz").scrollTop(hzHeight);

});

</script>

 

결과보기

Mins아빠 님 (230727) https://sir.kr/qa/506768

 

스크롤스파이 - 스크롤 높이에 따라 보이기/숨기기

 

<script src="https://code.jquery.com/jquery-latest.js"></script>


<style>

body {height:1000px; position:relative;}

#hz {position:fixed; bottom:0; display:none; border:1px solid red;}

</style>

<div id="hz">홈짱닷컴 Homzzang.com</div>

 

<script>

$(window).scroll(function () {

    if ($(this).scrollTop() > 100) {

        $('#hz').fadeIn();

    } else {

        $('#hz').fadeOut();

    }

});

</script>

 

결과보기

 

링크 클릭해 특정 수직좌표로 스크롤 이동

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#hz").on('click', function(event) {

    if (this.hash !== "") { // if열기

      event.preventDefault();

      var hash = this.hash;


      $('html, body').animate({

        scrollTop: $(hash).offset().top

      }, 800, function(){

        window.location.hash = hash;

      });

    } // if닫기

  });

});

</script>


 <style>

body, html, .main {height: 100%;}

section {min-height: 100%;}

</style>



<body>

<div class="main">

  <section><a href="#section2" id="hz">홈짱닷컴 (클릭)</a></section>

</div>


<div class="main" id="section2">

  <section style="background-color:coral">Homzzang.com</section>

</div>

</body>

 

결과보기


 

<style>

.menu {position: fixed; right: 0;}

.gap {height: 1000px;}

section>div {height: 30em;}    

</style>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(function() {

$(".menu li a").click(function(event) {

event.preventDefault();

$('html,body').animate({

scrollTop: $(this.hash).position().top

}, 500);

});

});

</script>


<ul class="menu">

    <li><a href="#hz_1">홈</a></li>

    <li><a href="#hz_2">짱</a></li>

    <li><a href="#hz_3">닷</a></li>

    <li><a href="#hz_4">컴</a></li>

</ul>

<div class="gap"></div>

<section>

    <div id="hz_1"><h4>홈</h4></div>

    <div id="hz_2"><h4>짱</h4></div>

    <div id="hz_3"><h4>닷</h4></div>

    <div id="hz_4"><h4>컴</h4></div>

</section>

 

결과보기 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인