javascript - valor - ¿Cómo desplazarse a un elemento específico utilizando jQuery?
seleccionar varios elementos jquery (12)
Tengo una mesa grande con barra de desplazamiento vertical. Me gustaría desplazarme a una línea específica en esta tabla usando jQuery / Javascript.
¿Hay métodos incorporados para hacer esto?
Aquí hay un pequeño ejemplo para jugar.
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>
Desplazar el elemento al centro del contenedor
Para llevar el elemento al centro del contenedor.
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;
}
No es exacto para el centro, pero no lo reconocerá en elementos más grandes.
Al contrario de lo que sugiere la mayoría de la gente, le recomiendo que use un complemento si desea animar el movimiento. Simplemente animar scrollTop no es suficiente para una experiencia de usuario fluida. Vea mi respuesta aquí para el razonamiento.
He probado varios complementos a lo largo de los años, pero eventualmente escribí uno. Es posible que desee darle un giro: jQuery.scrollable . Usando eso, la acción de desplazamiento se convierte en
$container.scrollTo( targetPosition );
Pero eso no es todo. Necesitamos arreglar la posición de destino, también. El cálculo que ves en otras respuestas,
$target.offset().top - $container.offset().top + $container.scrollTop()
Sobre todo funciona pero no es del todo correcto. No maneja el borde del contenedor de desplazamiento correctamente. El elemento de destino se desplaza hacia arriba demasiado lejos, por el tamaño del borde. Aquí hay una demo.
Por lo tanto, una mejor manera de calcular la posición de destino es
var target = $target[0],
container = $container[0];
targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;
Una vez más, eche un vistazo a la demostración para verla en acción.
Para una función que devuelve la posición de destino y funciona tanto para la ventana como para los contenedores de desplazamiento sin ventana, no dude en usar esta idea . Los comentarios allí explican cómo se calcula la posición.
Al principio, he dicho que sería mejor usar un complemento para el desplazamiento animado . Sin embargo, no necesita un complemento si desea saltar al objetivo sin una transición. Vea la respuesta de @James para eso, pero asegúrese de calcular la posición de destino correctamente si hay un borde alrededor del contenedor.
El mejor plugin que encontré fue esta esencia .
No es un complemento por decir, pero hace el trabajo de uno, y resolvió mis problemas. Desafortunadamente solo funciona en Firefox. No tengo idea de por qué a Chrome no le gusta / no quiere ejecutarlo.
EDITAR: Mientras tanto me las arreglé para hacerlo yo mismo. No hay necesidad de ningún plugin. Echa un vistazo a mi gist :
// 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);
});
Estoy de acuerdo con Kevin y otros, usar un complemento para esto no tiene sentido.
window.scrollTo(0, $("#element").offset().top);
Hice una combinación de lo que otros han publicado. Es simple y suave.
$(''#myButton'').click(function(){
$(''html, body'').animate({
scrollTop: $(''#scroll-to-this-element'').position().top },
1000
);
});
Me doy cuenta de que esto no responde al desplazamiento en un contenedor, pero a las personas les resulta útil:
$(''html,body'').animate({scrollTop: some_element.offset().top});
Seleccionamos tanto html como body porque el desplazador de documentos podría estar en cualquiera de los dos y es difícil determinar cuál. Para los navegadores modernos puedes obtener $(document.body) .
O bien, para ir a la parte superior de la página:
$(''html,body'').animate({scrollTop: 0});
O sin animación:
$(window).scrollTop(some_element.offset().top);
O...
window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)
Muerto simple. No se necesitan complementos .
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()
});
Aquí hay un ejemplo de trabajo .
No estoy seguro de por qué nadie dice lo obvio, ya que hay una función javascript scrollTo incorporada:
scrollTo( $(''#element'').position().top );
Para lo que vale, así es como logré lograr tal comportamiento para un elemento general que puede estar dentro de un DIV con desplazamiento (sin conocer el contenedor)
Crea una entrada falsa de la altura del elemento objetivo, y luego se enfoca en él, y el navegador se ocupará del resto, sin importar qué tan profundo esté dentro de la jerarquía desplazable. Funciona de maravilla.
var $scrollTo = $(''#someId''),
inputElem = $(''<input type="text"></input>'');
$scrollTo.prepend(inputElem);
inputElem.css({
position: ''absolute'',
width: ''1px'',
height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
Puede desplazarse por jQuery y JavaScript. Solo necesita dos elementos jQuery y este código JavaScript:
$(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>
Puedes usar el método scrollIntoView() en javascript. acaba de dar id.scrollIntoView();
Por ejemplo
row_5.scrollIntoView();
Siempre he encontrado que el complemento jQuery scrollTo es muy útil para esto. Juega con las demos para ver si es para ti.