¿Es posible desplazarse a una ubicación específica en la página usando jQuery?
¿La ubicación que quiero desplazar para tener que tener:
<a name="#123">here</a>
¿O simplemente puede pasar a un ID de DOM específico?
fuente
¿Es posible desplazarse a una ubicación específica en la página usando jQuery?
¿La ubicación que quiero desplazar para tener que tener:
<a name="#123">here</a>
¿O simplemente puede pasar a un ID de DOM específico?
Complemento de desplazamiento jQuery
Como esta es una pregunta etiquetada con jquery, debo decir que esta biblioteca tiene un complemento muy bueno para un desplazamiento suave, puede encontrarlo aquí: http://plugins.jquery.com/scrollTo/
Extractos de la documentación:
$('div.pane').scrollTo(...);//all divs w/class pane
o
$.scrollTo(...);//the plugin will take care of this
Función jQuery personalizada para desplazamiento
puede utilizar un enfoque muy ligero definiendo su función personalizada jquery de desplazamiento
$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
y úsalo como:
$('#your-div').scrollView();
Desplazarse a las coordenadas de una página
Animado html
y body
elementos con scrollTop
o scrollLeft
atributos
$('html, body').animate({
scrollTop: 0,
scrollLeft: 300
}, 1000);
JavaScript simple
desplazarse con window.scroll
window.scroll(horizontalOffset, verticalOffset);
solo para resumir, use window.location.hash para saltar al elemento con ID
window.location.hash = '#your-page-element';
Directamente en HTML (mejoras de accesibilidad)
<a href="#your-page-element">Jump to ID</a>
<div id="your-page-element">
will jump here
</div>
Sí, incluso en JavaScript simple es bastante fácil. Usted le da una identificación a un elemento y luego puede usarlo como un "marcador":
<div id="here">here</div>
Si desea que se desplace allí cuando un usuario hace clic en un enlace, puede usar el método probado y verdadero:
<a href="#here">scroll to over there</a>
Para hacerlo mediante programación, use scrollIntoView()
document.getElementById("here").scrollIntoView()
No es necesario utilizar ningún complemento, puede hacerlo así:
var divPosition = $('#divId').offset();
luego use esto para desplazar el documento a DOM específico:
$('html, body').animate({scrollTop: divPosition.top}, "slow");
.animate
ocurra la llamada
Aquí hay una versión pura de JavaScript:
location.hash = '#123';
Se desplazará automáticamente. Recuerde agregar el prefijo "#".
Javascript simple:
window.location = "#elementId"
<div id="idVal">
<!--div content goes here-->
</div>
...
<script type="text/javascript">
$(document).ready(function(){
var divLoc = $('#idVal').offset();
$('html, body').animate({scrollTop: divLoc.top}, "slow");
});
</script>
Este ejemplo muestra la ubicación de una identificación div particular, es decir, 'idVal' en este caso. Si tiene divs / tablas posteriores que se abrirán en esta página a través de ajax, puede asignar divs únicos y llamar al script para desplazarse a la ubicación particular para cada contenido de divs.
Espero que esto sea útil.
<script type="text/javascript">
$(document).ready(function(){
$(".scroll-element").click(function(){
$('html,body').animate({
scrollTop: $('.our_companies').offset().top
}, 1000);
return false;
});
})
</script>
Prueba esto
<div id="divRegister"></div>
$(document).ready(function() {
location.hash = "divRegister";
});
Aquí hay una variante del enfoque liviano de @ juraj-blahunka . Esta función no asume que el contenedor es el documento y solo se desplaza si el elemento no está a la vista. La cola de animación también está desactivada para evitar rebotes innecesarios.
$.fn.scrollToView = function () {
return $.each(this, function () {
if ($(this).position().top < 0 ||
$(this).position().top + $(this).height() > $(this).parent().height()) {
$(this).parent().animate({
scrollTop: $(this).parent().scrollTop() + $(this).position().top
}, {
duration: 300,
queue: false
});
}
});
};
Usando jquery.easing.min.js, con errores fijos de la consola IE
HTML
<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
Jquery
//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
$(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function () {
$('a.page-scroll').bind('click', function (event) {
var anchor = $(this);
if ($(anchor).length > 0) {
var href = $(anchor).attr('href');
if ($(href.substring(href.indexOf('#'))).length > 0) {
$('html, body').stop().animate({
scrollTop: $(href.substring(href.indexOf('#'))).offset().top
}, 1500, 'easeInOutExpo');
}
else {
window.location = href;
}
}
event.preventDefault();
});
});
location.hash = 'idOfElement';
debería ser suficiente
Puede usar scroll-behavior: smooth;
para hacer esto sin Javascript
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior