티스토리 뷰
See the Pen [jQuery] .scrollTop() by mill (@millfeel) on CodePen.
화면을 스크롤할 때 현재 사용자가 스크롤한 만큼의 거리를 계산해주거나, 스크롤 위치를 이동한다.
// 간격 값 반환
$('선택자').scrollTop();
// 스크롤 위치 이동
$(window).scrollTop(숫자);
[JS와 비교하기]
// JS
const $value = document.querySelector('.value');
const $topBtn = document.querySelector('.topBtn');
window.addEventListener('scroll', function () {
const scrollValue = window.scrollY;
if (scrollValue >= 500) {
$topBtn.style.display = 'block';
} else {
$topBtn.style.display = 'none';
}
$value.textContent = scrollValue;
})
$topBtn.addEventListener('click', function (){
window.scrollTo(0, 100);
})
// jQuery
$(function(){
$(window).scroll(function () {
const scrollValue = $(window).scrollTop();
if (scrollValue >= 500) {
$('.topBtn').css('display', 'block');
} else {
$('.topBtn').css('display', 'none');
}
$('.value').text(scrollValue);
})
$('.topBtn').click(function () {
$(window).scrollTop(100);
});
});
[공부좌표]
인터랙티브 웹디자인 p156
'이론 > jQuery' 카테고리의 다른 글
[jQuery] CSS의 값에서 '문자' 값만 빼기 (0) | 2021.10.27 |
---|---|
[jQuery] e.pageX / e.pageY (0) | 2021.10.24 |
[jQuery] 문자를 가져오거나 변경하는 .text()와 HTML 태그 구조를 포함해서 가져오거나 변경하는 .html() (0) | 2021.10.24 |
[jQuery] .addClass() .removeClass() (0) | 2021.10.24 |
[jQuery] .hide() .show() .fadeOut() .fadeIn() (0) | 2021.10.23 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- @font-face
- 프로퍼티
- clinetTop
- 대괄포 표기법
- 객체의 프로퍼티
- constructor
- scrollHeight
- clientHeight
- scrollTop
- innerHeight
- 점 표기법
- 동등 연산자
- prototype 프로퍼티
- offsetTop
- [[Prototype]]
- 링크막기 #a링크막기
- 부등 연산자
- 일치 연산자
- 불일치 연산자
- offsetHeight
- 동치 연산자
- property
- outerHeight
- javascript class
- __proto__
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
글 보관함