• 회원가입
  • 로그인

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

목차

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

 

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://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>

 

결과보기

 

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

 

<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>

 

결과보기


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

찾아주셔서 감사합니다. Since 2012