down - ¿Cómo puedo desplazarme a una ubicación específica en la página usando jquery?

scroll down jquery

Question

¿Es posible desplazarse a una ubicación específica en la página usando jQuery?

¿Tiene que tener la ubicación que quiero desplazar?

<a name="#123">here</a>

¿O puede simplemente pasar a una identificación DOM específica?

Answer 1

Aquí hay una variante del enfoque liviano de @ juraj-blahunka. Esta función no supone que el contenedor es el documento y solo se desplaza si el elemento está fuera de 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
            });
        }
    });
};

Answer 2

Aquí hay una versión pura de javascript:

location.hash = ''#123'';

Se desplazará automáticamente. Recuerde agregar el prefijo "#".

Answer 3

No es necesario usar ningún complemento, puedes hacerlo así:

var divPosition = $(''#divId'').offset();

luego use esto para desplazar el documento a un DOM específico:

$(''html, body'').animate({scrollTop: divPosition.top}, "slow");

Answer 4

Plain Javascript:

window.location = "#elementId"

Answer 5

Prueba esto

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});

Answer 6

Sí, incluso en JavaScript, es bastante fácil. Le das a un elemento una identificación y luego puedes usar eso 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:

<a href="#here">scroll to over there</a>

Para hacerlo mediante programación, use scrollIntoView()

document.getElementById("here").scrollIntoView()

Answer 7

Plugin jQuery Scroll

ya que esta es una pregunta etiquetada con jquery, tengo que decir que esta biblioteca tiene un plugin muy bueno para un desplazamiento suave, puedes 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 usar un enfoque muy ligero definiendo su función de jquery de desplazamiento personalizada

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

Animar elementos html y body con atributos scrollTop o scrollLeft

$(''html, body'').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

Simple javascript

desplazándose 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>

Answer 8

<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 cómo ubicar una identificación div específica, es decir, ''idVal'' en este caso. Si tiene divisiones / tablas subsiguientes que se abrirán en esta página mediante ajax, puede asignar divs únicos y llamar al guión para desplazarse a la ubicación particular de cada contenido de divs.

Espero que esto sea útil.

Answer 9

<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $(''html,body'').animate({
                scrollTop: $(''.our_companies'').offset().top
            }, 1000);

            return false;
        });
    })
</script>