jQuery를 사용하여 특정 항목으로 스크롤하려면 어떻게 해야 합니까?
세로 스크롤바가 있는 큰 테이블이 있습니다.jQuery/JavaScript를 사용하여 이 표의 특정 행까지 스크롤합니다.
이를 위한 기본 제공 방법이 있습니까?
div {
width: 100px;
height: 70px;
border: 1px solid blue;
overflow: auto;
}<div>
<table id="my_table">
<tr id='row_1'><td>1</td></tr>
<tr id='row_2'><td>2</td></tr>
<tr id='row_3'><td>3</td></tr>
<tr id='row_4'><td>4</td></tr>
<tr id='row_5'><td>5</td></tr>
<tr id='row_6'><td>6</td></tr>
<tr id='row_7'><td>7</td></tr>
<tr id='row_8'><td>8</td></tr>
<tr id='row_9'><td>9</td></tr>
</table>
</div>아주 간단합니다.플러그인은 필요 없습니다.
var $container = $('div'),
$scrollTo = $('#row_8');
$container.scrollTop(
$scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);
// Or you can animate the scrolling:
$container.animate({
scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});
매뉴얼 (용)
이것이 컨테이너 내 스크롤에 응답하지 않는 것은 알지만, 사람들은 이것이 유용하다고 생각하고 있습니다.
$('html,body').animate({scrollTop: some_element.offset().top});
html과 body를 모두 선택한 이유는 문서 스크롤러가 둘 중 하나일 수 있기 때문입니다.최신 브라우저의 경우,$(document.body).
또는 페이지 맨 위로 이동하려면:
$('html,body').animate({scrollTop: 0});
애니메이션이 없는 경우:
$(window).scrollTop(some_element.offset().top);
아니면...
window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)
Kevin 등의 의견에 동의합니다.플러그인을 사용하는 것은 무의미합니다.
window.scrollTo(0, $("#element").offset().top);
나는 그것을 스스로 해냈다.플러그인은 필요 없습니다.제 요지를 보세요.
// Replace #fromA with your button/control and #toB with the target to which
// You wanna scroll to.
//
$("#fromA").click(function() {
$("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});
사용할 수 있습니다.scrollIntoView()method를 javascript로 지정합니다.그냥 주다id.scrollIntoView();
예를들면
row_5.scrollIntoView();
jQuery scrollTo 플러그인을 사용할 수 있습니다.
$('div').scrollTo('#row_8');
요소를 용기 중앙으로 스크롤
컨테이너의 중앙에 요소를 배치합니다.
JS
function scrollToCenter() {
var container = $('.container'),
scrollTo = $('.5');
container.animate({
//scrolls to center
scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
});
}
HTML
<div class="container">
<div class="1">
1
</div>
<div class="2">
2
</div>
<div class="3">
3
</div>
<div class="4">
4
</div>
<div class="5">
5
</div>
<div class="6">
6
</div>
<div class="7">
7
</div>
<div class="8">
8
</div>
<div class="9">
9
</div>
<div class="10">
10
</div>
</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
Scroll
</button>
css
.container {
height: 60px;
overflow-y: scroll;
width 60px;
background-color: white;
}
중앙에는 정확하지 않지만 더 큰 요소에서는 인식할 수 없습니다.
jQuery와 JavaScript로 스크롤할 수 있습니다.jQuery와 JavaScript 코드 2개가 필요합니다.
$(function() {
// Generic selector to be used anywhere
$(".js-scroll-to-id").click(function(e) {
// Get the href dynamically
var destination = $(this).attr('href');
// Prevent href=“#” link from changing the URL hash (optional)
e.preventDefault();
// Animate scroll to destination
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1500);
});
});
$(function() {
// Generic selector to be used anywhere
$(".js-scroll-to-id").click(function(e) {
// Get the href dynamically
var destination = $(this).attr('href');
// Prevent href=“#” link from changing the URL hash (optional)
e.preventDefault();
// Animate scroll to destination
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1500);
});
});#pane1 {
background: #000;
width: 400px;
height: 400px;
}
#pane2 {
background: #ff0000;
width: 400px;
height: 400px;
}
#pane3 {
background: #ccc;
width: 400px;
height: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#pane1" class=" js-scroll-to-id">Item 1</a>
</li>
<li>
<a href="#pane2" class="js-scroll-to-id">Item 2</a>
</li>
<li>
<a href="#pane3" class=" js-scroll-to-id">Item 3</a>
</li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
<li>
<a href="#pane3" class="js-scroll-to-id">Item 1</a>
</li>
<li>
<a href="#pane2" class="js-scroll-to-id">Item 2</a>
</li>
<li>
<a href="#pane1" class="js-scroll-to-id">Item 3</a>
</li>
</ul>javascript가 내장되어 있기 때문에 왜 아무도 당연한 말을 하지 않는지 모르겠다.scrollTo기능:
scrollTo( $('#element').position().top );
저는 다른 사람들이 올린 글을 조합해서 썼어요.심플하고 매끄럽다
$('#myButton').click(function(){
$('html, body').animate({
scrollTop: $('#scroll-to-this-element').position().top },
1000
);
});
여기 있는 대부분의 사람들이 제안하는 것과 달리, 이동을 애니메이션화하려면 플러그인을 사용하는 것이 좋습니다.ScrollTop을 애니메이션으로 만드는 것만으로는 원활한 사용자 경험을 얻을 수 없습니다.추리는 이쪽에서 내 답을 봐.
몇 년 동안 많은 플러그인을 시도했지만 결국 직접 플러그인을 작성했습니다.jQuery.scrollable을 시도해 보는 것이 좋습니다.이를 통해 스크롤 액션은
$container.scrollTo( targetPosition );
하지만 그게 다가 아닙니다.목표 위치도 고쳐야 해요.다른 답변에서 볼 수 있는 계산은
$target.offset().top - $container.offset().top + $container.scrollTop()
대부분 작동하지만 완전히 정확하지는 않습니다.스크롤 용기의 테두리를 제대로 처리하지 못합니다.대상 요소가 테두리 크기만큼 위쪽으로 스크롤되었습니다.여기 데모가 있습니다.
따라서 목표 위치를 계산하는 더 좋은 방법은
var target = $target[0],
container = $container[0];
targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;
다시 한 번 데모를 보고 실제 작동 상태를 확인하십시오.
대상 위치를 반환하고 창 및 비창 스크롤 컨테이너에 대해 모두 작동하는 기능은 이 GIST를 사용하십시오.거기에 있는 코멘트는 포지션이 어떻게 계산되는지 설명하고 있습니다.
처음에 애니메이션 스크롤에는 플러그인을 사용하는 것이 좋다고 했습니다.그러나 전환 없이 대상으로 이동하려면 플러그인이 필요하지 않습니다.자세한 내용은 @James의 답변을 참조하지만 용기 주위에 테두리가 있는 경우 타깃 위치를 올바르게 계산해야 합니다.
중요한 것은 이렇게 해서 DIV 안에 스크롤이 있는 일반적인 요소(컨테이너를 몰라도)에 대해 그러한 동작을 할 수 있게 된 것입니다.
타깃 요소의 높이를 가짜로 입력한 후 포커스를 맞추면 스크롤 가능한 계층 내 깊이와 상관없이 브라우저가 나머지 부분을 처리합니다.마법처럼 작동한다.
var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');
$scrollTo.prepend(inputElem);
inputElem.css({
position: 'absolute',
width: '1px',
height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
이 조합은 제가 했어요.그것은 나에게 효과가 있다. 하지만 만약 클릭한다면 그 div 사이즈가 너무 커서 scenerio 스크롤이 이 div까지 내려가지 않는다.
var scrollDownTo =$("#show_question_" + nQueId).position().top;
console.log(scrollDownTo);
$('#slider_light_box_container').animate({
scrollTop: scrollDownTo
}, 1000, function(){
});
}
언급URL : https://stackoverflow.com/questions/2905867/how-to-scroll-to-specific-item-using-jquery
'sourcecode' 카테고리의 다른 글
| Javascript에서 CSS를 추가하려면 어떻게 해야 하나요? (0) | 2022.09.25 |
|---|---|
| 이벤트 내에서 IF-Clause 사용 (0) | 2022.09.25 |
| Quasar 부트 파일에서 스토어 액세스 (0) | 2022.09.25 |
| MySQL 8의 REGEXP_REPLACE 문제 (0) | 2022.09.25 |
| 오류: JavaFX 런타임 구성 요소가 없습니다. JDK 11에서 이 응용 프로그램을 실행하려면 필요합니다. (0) | 2022.09.25 |