Pregunta jQuery scroll to element


tengo esto input elemento:

<input type="text" class="textfield" value="" id="subject" name="subject">

Luego tengo algunos otros elementos, como otras entradas de texto, áreas de texto, etc.

Cuando el usuario hace clic en eso input con #subject, la página debe desplazarse al último elemento de la página con una buena animación. Debería ser un desplazamiento hacia abajo y no hacia arriba.

El último elemento de la página es submit botón con #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

La animación no debe ser demasiado rápida y debe ser fluida.

Estoy ejecutando la última versión de jQuery. Prefiero no instalar ningún complemento, sino utilizar las funciones jQuery predeterminadas para lograrlo.


1871
2017-07-13 09:49


origen


Respuestas:


Asumiendo que tienes un botón con la identificación button, prueba este ejemplo:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Obtuve el código del artículo Desplazarse suavemente a un elemento sin un plugin jQuery. Y lo he probado en el siguiente ejemplo.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


3478
2017-07-13 09:52



  jQuery .scrollTo() Method 

jQuery .scrollTo ():  Ver - Demo, API, Fuente

Escribí este complemento liviano para hacer que el desplazamiento de página / elemento sea mucho más fácil. Es flexible donde podría pasar un elemento objetivo o un valor especificado. Quizás esto podría ser parte del próximo lanzamiento oficial de jQuery, ¿qué opinas?


Uso de ejemplos:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Opciones:

scrollTarget: Un elemento, cadena o número que indica la posición de desplazamiento deseada.

offsetTop: Un número que define espaciado adicional por encima del destino de desplazamiento.

duración: Una cadena o número que determina cuánto tiempo se ejecutará la animación.

relajar: Una cadena que indica qué función de relajación usar para la transición.

completar: Una función para llamar una vez que se completa la animación.


453
2017-10-05 08:50



Si no estás muy interesado en el efecto de desplazamiento suave y solo te interesa desplazarte a un elemento en particular, no necesitas una función jQuery para esto. Javascript tiene su caso cubierto:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Entonces, todo lo que necesitas hacer es: $("selector").get(0).scrollIntoView(); 

.get(0) se usa porque queremos recuperar el elemento DOM de JavaScript y no el elemento DOM de JQuery.


267
2017-12-24 11:35



Revisar la ScrollTo enchufar. Puedes ver la demo aquí.

Espero que ayude.


42
2017-07-13 11:05



jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06



Usando este script simple

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Haría en ordenar que si una etiqueta hash se encuentra en la url, el scrollTo animar a la ID. Si no se encuentra la etiqueta hash, entonces ignore la secuencia de comandos.


26
2017-09-05 11:53



La solución de Steve y Peter funciona muy bien.

Pero en algunos casos, puede que tenga que convertir el valor a un número entero. Extrañamente, el valor devuelto de $("...").offset().top a veces está en float.
Utilizar: parseInt($("....").offset().top)

Por ejemplo:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39



Una versión compacta de la solución "animada".

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Uso básico: $('#your_element').scrollTo();


15
2017-08-29 11:19