Desplácese hasta un elemento con jQuery

Tengo esta 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 a #subject, la página debería desplazarse hasta el último elemento de la página con una bonita animación. Debe ser un desplazamiento hacia abajo y no hacia arriba.

El último elemento de la página es un 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 usar las funciones predeterminadas de jQuery para lograrlo.

preguntado el 13 de julio de 11 a las 06:07

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView -

scrollTo fue deshabilitado para mí debido a un complemento de Chrome, no estoy seguro de cuál. -

30 Respuestas

Suponiendo que tiene 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 Desplácese suavemente a un elemento sin un complemento de 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>

Respondido 08 Jul 18, 15:07

Esto no funcionará en todos los casos. Ver stackoverflow.com/questions/2905867/… - Janis Elmeris

Si no desea animación y, en su lugar, desea saltar instantáneamente al elemento, use .scrollTop(…) en lugar de .animate({scrollTop: …}, …). - Rory O'Kane

Si está intentando leer ese artículo, aquí hay un enlace que funciona: Desplácese suavemente a un elemento sin un complemento de jQuery - Adarsh ​​Punj

Método jQuery .scrollTo ()

jQuery .scrollTo (): Ver: demostración, API, fuente

Escribí este complemento liviano para facilitar el desplazamiento de la página / elemento. Es flexible donde puede pasar un elemento de destino o un valor especificado. Quizás esto podría ser parte del próximo lanzamiento oficial de jQuery, ¿qué opinas?

Ejemplos de uso:

$('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:

desplazamientoObjetivo: Elemento, cadena o número que indica la posición de desplazamiento deseada.

Desplazamiento superior: Un número que define un espacio adicional por encima del objetivo de desplazamiento.

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

aliviando: Una cadena que indica qué función de aceleración se utilizará para la transición.

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

contestado el 17 de mayo de 17 a las 11:05

$ ('body') no funcionó en FF, así que probé $ ('html, body') que funcionó. - kiranvj

Si alguien necesita esta fuente de script, aquí puede obtenerla. flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js - Arturo

Si no está muy interesado en el efecto de desplazamiento suave y solo está interesado en desplazarse a un elemento en particular, no necesita ninguna función jQuery para esto. Javascript tiene su caso cubierto:

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

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

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

Respondido el 21 de enero de 14 a las 06:01

¿Podrías también usar $(selector)[0]? - RobW

RobW, sí, puedes usar [0], pero get (0) te protege contra índices indefinidos o negativos. Ver la fuente: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get - corbacho

Si no desea usar jQuery en absoluto, solo use document.getElementById('#elementID').scrollIntoView(). No sirve de nada cargar una biblioteca de ~ 100k solo para seleccionar un elemento y luego convertirlo a JavaScript normal. - Gavin

@Gavin, estoy seguro de que quisiste que fuera: document.getElementById('elementID').scrollIntoView() - Brian

Esto se puede lograr sin jQuery:

document.getElementById("element-id").scrollIntoView();

Respondido 14 Jul 21, 02:07

Usando este sencillo script

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

Haría en orden que si se encuentra una etiqueta hash en la URL, el scrollTo se anima a la ID. Si no se encuentra la etiqueta hash, ignore el script.

respondido 24 nov., 17:04

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>

Respondido 16 ago 16, 06:08

Para hacerlo más universal y eliminar la colocación innecesaria de hashtag en la ventana del enlace del navegador, simplemente modifiqué el código de la siguiente manera: jQuery(document).ready(function($) { $(document).on( "click", 'a[href^="#"]', function( e ) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000); }); }); - bubencode

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

Pero en algunos casos, es posible que deba convertir el valor a un número entero. Curiosamente, el valor devuelto por $("...").offset().top a veces está en float.
Uso: parseInt($("....").offset().top)

Por ejemplo:

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

Respondido 27 ago 15, 07:08

Esta es la forma en que lo hago.

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

Funciona en cualquier navegador.

Se puede envolver fácilmente en una función.

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

Aquí hay un ejemplo de trabajo. 

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})
.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

Docs

Respondido el 20 de junio de 19 a las 14:06

Bastante corto y dulce. Una cosa a tener en cuenta: creo que esto solo lo desplaza hacia la vista (podría estar en la parte inferior de la ventana gráfica) en lugar de desplazarse hacia la parte superior de la ventana gráfica, como lo hace la configuración de scrollTop. - Sean

También utilicé esta solución, pero al menos la versión 92 de Chrome por alguna razón tiene el desplazamiento suave deshabilitado de forma predeterminada, por lo que esta solución ya no funciona (al momento de escribir esto). En realidad, bastante decepcionante. Todavía se puede habilitar manualmente seleccionando "implante"(en lugar de" Predeterminado ") para chrome://flags/#smooth-scrolling configuración. - informatik01

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();

contestado el 22 de mayo de 17 a las 08:05

Con esta solución no necesita ningún complemento y hay no se requiere configuración además de colocar el guión antes de tu cierre </body> etiqueta.

$("a[href^='#']").on("click", function(e) {
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
  return false;
});

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

Al cargar, si hay un hash en la dirección, lo desplazamos.

Y, siempre que haga clic en un a enlace con un href hash, por ejemplo #top, nos desplazamos hasta él.

## Editar 2020

Si desea una solución de JavaScript pura: tal vez podría usar algo como:

var _scrollToElement = function (selector) {
  try {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' });
  } catch (e) {
    console.warn(e);
  }
}

var _scrollToHashesInHrefs = function () {
  document.querySelectorAll("a[href^='#']").forEach(function (el) {
    el.addEventListener('click', function (e) {
      _scrollToElement(el.getAttribute('href'));
      return false;
    })
  })
  if (window.location.hash) {
    _scrollToElement(window.location.hash);
  }
}

_scrollToHashesInHrefs();

Respondido 21 ago 20, 16:08

Si solo está manejando el desplazamiento a un elemento de entrada, puede usar focus(). Por ejemplo, si desea desplazarse hasta la primera entrada visible:

$(':input:visible').first().focus();

O la primera entrada visible en un contenedor con clase .error:

$('.error :input:visible').first().focus();

Gracias a bola de tricia por señalar esto!

contestado el 23 de mayo de 17 a las 13:05

Si desea desplazarse dentro de un contenedor de desbordamiento (en lugar de $('html, body') respondido anteriormente), trabajando también con posicionamiento absoluto, esta es la forma de hacer:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

Respondido el 23 de Septiembre de 17 a las 01:09

Manera fácil de lograr el desplazamiento de la página para apuntar div id

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

Respondido 10 Oct 17, 14:10

animaciones:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

Respondido 27 Feb 17, 10:02

En la mayoría de los casos, sería mejor utilizar un complemento. Seriamente. voy a promociona el mío aquí. Por supuesto que también hay otros. Pero compruebe si realmente evitan las trampas para las que desearía un complemento en primer lugar, no todos lo hacen.

He escrito sobre las razones para usar un complemento. en otra parte. En pocas palabras, el trazo que sustenta la mayoría de las respuestas aquí 

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

es una mala experiencia de usuario.

  • La animación no responde a las acciones del usuario. Continúa incluso si el usuario hace clic, toca o intenta desplazarse.

  • Si el punto de inicio de la animación está cerca del elemento de destino, la animación es tremendamente lenta.

  • Si el elemento de destino se coloca cerca de la parte inferior de la página, no se puede desplazar hasta la parte superior de la ventana. La animación de desplazamiento se detiene abruptamente entonces, en medio del movimiento.

Para manejar estos problemas (y un grupo de otros), puedes usar un complemento mío, jQuery.desplazable. La llamada entonces se convierte en

$( window ).scrollTo( targetPosition );

y eso es. Por supuesto, hay más opciones.

Con respecto a la posición de destino, $target.offset().top hace el trabajo en la mayoría de los casos. Pero tenga en cuenta que el valor devuelto no tiene un borde en el html elemento en cuentaver esta demostración). Si necesita que la posición de destino sea precisa bajo cualquier circunstancia, es mejor usar

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

Eso funciona incluso si un borde en el html El elemento está configurado.

Respondido 17 ago 15, 12:08

Después de encontrar la manera de hacer que mi código funcione, creo que debería dejar las cosas un poco claras: para usar:

$('html, body').animate({
   scrollTop: $("#div1").offset().top
}, 2000);

debes estar en la parte superior de la página ya que $("#div1").offset().top devolverá diferentes números para las diferentes posiciones a las que se desplaza. Si ya se desplazó fuera de la parte superior, debe especificar la pageY valor (ver pageY definición aquí: https://javascript.info/coordinates).

Así que ahora, el problema es calcular el pageY valor de un elemento. A continuación se muestra un ejemplo en caso de que el contenedor de desplazamiento sea el cuerpo:

function getPageY(id) {
    let elem = document.getElementById(id);
    let box = elem.getBoundingClientRect();
    var body = document.getElementsByTagName("BODY")[0];
    return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}

La función anterior devuelve el mismo número incluso si se desplazó en algún lugar. Ahora, para volver a ese elemento:

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

Respondido 26 ago 20, 08:08

Este es mi enfoque abstrayendo los ID y href, usando un selector de clase genérico

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").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
    }, 500);
  });
});
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>

Respondido el 21 de junio de 15 a las 17:06

Complemento jQuery personalizado muy simple y fácil de usar. Solo agrega el atributo scroll= a su elemento en el que se puede hacer clic y establezca su valor en el selector al que desea desplazarse.

Al igual que: <a scroll="#product">Click me</a>. Se puede utilizar en cualquier elemento. 

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

Respondido 31 Oct 17, 16:10

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

Respondido 12 Feb 14, 14:02

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

Respondido 03 Jul 15, 07:07

Esta es la respuesta de Atharva de: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView. Solo quería agregar si su documento está en un iframe, puede elegir un elemento en el marco principal para desplazarse a la vista:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

Respondido el 22 de Septiembre de 18 a las 05:09

$('html, body').animate(...) no me funciona en los navegadores iPhone, Android, Chrome o Safari.

Tuve que apuntar al elemento de contenido raíz de la página.

$ ('# cotnent'). animate (...)

Esto es lo que he terminado con:

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

Todo el contenido corporal conectado con un div #content

<html>
    ....
    <body>
        <div id="content">
        ...
        </div>
    </body>
</html>

Respondido 10 ago 21, 04:08

Realmente no debería utilizar el rastreo de agentes de usuario. webaim.org/blog/user-agent-string-history - Alex Podworny

Agregue salto de palabra: romper todo; a su elemento CSS que está en problemas. Posición de jQuery.animate de la vista web de Android / iOS ({scrollTop: y}) incorrecta. medium.com/@ellery.leung/… - daliaessam

Escribí una función de propósito general que se desplaza a un objeto jQuery, un selector CSS o un valor numérico.

Ejemplo de uso:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

El código de la función:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

respondido 18 nov., 15:19

Cuando el usuario hace clic en esa entrada con #subject, la página debe desplazarse hasta el último elemento de la página con una bonita animación. Debe ser un desplazamiento hacia abajo y no hacia arriba.

El último elemento de la página es un botón de envío con #submit

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

Esto primero se desplazará hacia abajo hasta #submit luego restaure el cursor a la entrada en la que se hizo clic, que imita un desplazamiento hacia abajo y funciona en la mayoría de los navegadores. Tampoco requiere jQuery, ya que se puede escribir en JavaScript puro.

¿Puede esta manera de usar focus función imitar la animación de una mejor manera, a través del encadenamiento focus llamadas. No he probado esta teoría, pero se vería así:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

respondido 28 nov., 15:12

Configuré un módulo elemento de desplazamiento npm install scroll-element. Funciona así:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

Escrito con la ayuda de las siguientes publicaciones de SO:

Aquí está el código:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

contestado el 23 de mayo de 17 a las 13:05

Respuesta actualizada a 2019:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

Respondido el 17 de enero de 19 a las 19:01

Debe utilizar este selector para el cuerpo: [document.documentElement, document.body] Y No es necesario el desplazamiento del cuerpo en la ecuación. $ ('# subject'). offset (). top es suficiente. - ali6p

UN TRAZADOR DE LÍNEAS

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});


subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});
.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}
<input type="text" class="textfield" value="click here" id="subject" name="subject">

<div class="box">
  Some content
  <textarea></textarea>
</div>

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

<div class="foot">Some footer</div>

Respondido 20 Feb 20, 14:02

Para mostrar el elemento completo (si es posible con el tamaño de ventana actual):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

Respondido 12 Jul 14, 07:07

Por lo que vale, así es como logré lograr tal comportamiento para un elemento general que puede estar dentro de un DIV con desplazamiento. En nuestro caso, no desplazamos el cuerpo completo, sino solo elementos particulares con overflow: auto; dentro de un diseño más grande.

Crea una entrada falsa de la altura del elemento de destino, y luego le pone un foco, y el navegador se ocupará del resto sin importar cuán 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();

Respondido 26 Feb 16, 11:02

Esto funcionó para mí:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

respondido 07 nov., 18:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.