jQuery desplazarse al elemento

2328

Tengo este inputelemento:

<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 inputcon #subject, la página debe desplazarse al ú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 submitbotó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 lograr esto.

javascript jquery scroll DiegoP.
fuente

3

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

Christophe Roussy

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

Jacksonkr

4025

Suponiendo que tiene un botón con la identificación button, intente 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 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>

Expandir fragmento

Steve
fuente

24

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

Jānis Elmeris

77

@BarryChapman no exactamente. Después de buscar en Google, he encontrado esto , por lo que se necesitan ambas etiquetas si no desea tener una lógica adicional por tipo de navegador.

s3m3n

73

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

Rory O'Kane

11

Además de su solución (que funciona muy bien), puede agregar una función completa que agrega el hashtag a la url. En este caso, no se desplazará, porque scrollTo ya se desplazó a la posición correcta, y si un usuario copia la URL, se ajustará automáticamente al lugar correcto en la página.

Sander

10

si usa una devolución de llamada para ejecutarse cuando la animación está completa y nota que la devolución de llamada se dispara dos veces con esta solución, intente usar "$ ('html body'). animate (..." en lugar de "$ ('html, body') .animate (... "la coma creó dos eventos animados. uno para html, uno para el cuerpo. Realmente solo quieres uno para el cuerpo html Gracias @TJ Crowder stackoverflow.com/questions/8790752/…

BoatCode

526

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

Escribí este plugin liviano para hacer que el desplazamiento de página / elemento sea mucho más fácil. 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é te parece?

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:

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

offsetTop : 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 durará la animación.

easing : una cadena que indica qué función de aceleración utilizar para la transición.

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

Timothy Perez
fuente

2

Estaba funcionando hasta una actualización reciente en Chrome. Tengo una versión que funciona que estoy usando actualmente en memoryboxweddings.com/photography-posts (si quieres probarlo). Publicaré una actualización una vez que se solucione.

Timothy Perez

Solucionado, resultó que en realidad era un archivo JS de jquery.com que lo estaba matando. Debería funcionar ahora si lo intentas.

Timothy Perez

44

@TimothyPerez: ¿Estoy seguro de que eso significa algo permisivo para uso comercial? ¿Estoy seguro de que hay muchas personas a las que les gustaría usar ese fragmento de código en cualquier lugar de sus sitios web y eso les ayudaría a dormir un poco más fácilmente por la noche? ¿Quizás algo como la licencia MIT podría satisfacer sus necesidades? en.wikipedia.org/wiki/MIT_License

Robert Massaioli

13

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

kiranvj

55

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

Arturs

370

Si no está muy interesado en el efecto de desplazamiento suave y solo está interesado en desplazarse a un elemento en particular, no necesita alguna 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.

Atharva
fuente

12

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

RobW

16

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

Corbacho

21

Si no quieres usar jQuery, solo úsalo document.getElementById('#elementID').scrollIntoView(). No sirve cargar una biblioteca de ~ 100k solo para seleccionar un elemento y luego convertirlo a JavaScript normal.

Gavin

6262

@Gavin Estoy seguro de que quería decir que para ser:document.getElementById('elementID').scrollIntoView()

Brian

3

Frio. Pero antes de usar, asegúrese de que el navegador lo admita. Según Mozilla "Esta es una tecnología experimental"

Tejasvi Hegde

48

Usando este simple 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.

Warface
fuente

$(window.location.hash)no funcionará para los hashes que no cumplan con la detección de identificación de expresiones regulares de jQuery. Por ejemplo, hashes que contienen números. También es un poco peligroso; el formato de entrada debe validarse para que no termine seleccionando un elemento diferente.

dchacke

35

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>

Expandir fragmento

davidcondrey
fuente

1

Para hacerlo más universal y eliminar la colocación innecesaria de hashtag en la ventana de 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

31

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

Pero en algunos casos, es posible que deba convertir el valor a un entero. Curiosamente, el valor devuelto de a $("...").offset().topveces está en float.
Utilizar:parseInt($("....").offset().top)

Por ejemplo:

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

Tejasvi Hegde
fuente

22

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

Rezgar Cadro
fuente

22

Así es como 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>

Expandir fragmento

Docs

Edvard Åkerberg
fuente

66

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

OG Sean

20

Sé una manera sin jQuery:

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

Editar: Han pasado dos años y todavía obtengo reputación al azar de esta publicación lmao

GameMaster1928
fuente

18

Si solo está manejando el desplazamiento a un elemento de entrada, puede usarlo focus(). Por ejemplo, si desea desplazarse a 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 Tricia Ball por señalar esto!

Benjamin Oakes
fuente

17

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

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

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

En carga, si hay un hash en la dirección, nos desplazamos a él.

Y, cada vez que hace clic en un aenlace con un hrefhash #top, por ejemplo , nos desplazamos a él.

Jonathan
fuente

Esto probablemente debería ser en > 1lugar de 0, solo porque /#hace que este script se rompa

Tallboy

Técnicamente, no debería terminar con una URL hash vacía a menos que los enlaces estén mal construidos, pero TY. (aunque mi propia versión de este código ya incluye este parche ^^)

Jonathan

Hay un jitter asociado con este código, sin embargo, es fácilmente reparable. Debe hacerlo return false;al final del evento al hacer clic para evitar que suceda la acción predeterminada, desplazarse inmediatamente al ancla.

roncli

2

@roncli buen punto - alternativamente solo puedes hacerloe.preventDefault();

Jonathan

e.preventDefault()sin embargo, no actualiza el hash en la url al hacer clic, siempre es una url sin hash

jayasurya_j

8

En la mayoría de los casos, sería mejor usar un complemento. Seriamente. Voy a promocionar el mío aquí . Por supuesto que también hay otros. Pero compruebe si realmente evitan los escollos para los que desea un complemento en primer lugar, no todos lo hacen.

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

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

Está mal UX.

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 partida de la animación está cerca del elemento objetivo, la animación es dolorosamente lenta.
Si el elemento de destino se coloca cerca de la parte inferior de la página, no se puede desplazar a la parte superior de la ventana. La animación de desplazamiento se detiene abruptamente entonces, a mitad de movimiento.

Para manejar estos problemas (y muchos otros ), puede usar un complemento mío, jQuery.scrollable . La llamada 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().tophace el trabajo en la mayoría de los casos. Pero tenga en cuenta que el valor devuelto no tiene en cuenta un borde en el htmlelemento ( consulte 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 se establece un borde en el htmlelemento.

hashchange
fuente

8

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

fuente

8

Si desea desplazarse dentro de un contenedor de desbordamiento (en lugar de $('html, body')responder arriba), trabajando también con posicionamiento absoluto, esta es la manera de hacerlo:

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

container.animate({
  scrollTop: pos
}

FAjir
fuente

7

Manera fácil de lograr el desplazamiento de la página al ID div de destino

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

Irshad Khan
fuente

6

Este es mi enfoque para abstraer 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>

Expandir fragmento

vascogaspar
fuente

6

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

De este modo: <a scroll="#product">Click me</a>. Se puede usar 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>

DevWL
fuente

4

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

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

kayz1
fuente

4

$('html, body').animate(...) No es para mí en iPhone, Android Chrome Safari Safari.

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

$ ('# cotnent'). animado (...)

Esto es lo que terminé 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 del cuerpo conectado con un #content div

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

Shahdat
fuente

Realmente no deberías usar el rastreo de agente de usuario. webaim.org/blog/user-agent-string-history

Alex Podworny

Añadir salto de palabra: romper todo; a su elemento CSS que está en problemas. Vista web de Android / iOS jQuery.animate ({scrollTop: y}) posición incorrecta. medium.com/@ellery.leung/…

daliaessam

4

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 marco flotante, puede elegir un elemento en el marco principal para desplazarse a la vista:

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

cynya
fuente

3

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

fuente

3

Cuando el usuario hace clic en esa entrada con #subject, la página debe desplazarse al ú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();
});

Primero se desplazará hacia abajo para #submitluego restaurar 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 puede escribirse en JavaScript puro.

¿Puede esta moda de usar la focusfunción imitar la animación de una mejor manera, mediante el encadenamiento de focusllamadas? 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>

Khaled.K
fuente

3

Configuré un módulo scroll-element 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 ayuda de las siguientes publicaciones 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 }
}

svnm
fuente

2

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

Roman Shamritskiy
fuente

2

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

isapir
fuente

2

Por lo que vale, así es como logré lograr ese 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 desbordamiento: auto; dentro de un diseño más grande.

Crea una entrada falsa de la altura del elemento de destino, y luego lo enfoca, y el navegador se encargará del resto sin importar cuán profundo dentro de la jerarquía de desplazamiento se encuentre. 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();

martinh_kentico
fuente

2

Esto funcionó para mí:

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

estrella polar
fuente

2

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>

Expandir fragmento

Minguocode
fuente

2

UN TRAZADOR DE LÍNEAS

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

Mostrar fragmento de código

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>

Expandir fragmento

Kamil Kiełczewski
fuente

1

funciona perfectamente!

jjoselon

1

Respuesta actualizada a partir de 2019:

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

stardust4891
fuente

Debería este selector para el cuerpo: [document.documentElement, document.body] Y no necesita desplazamiento del cuerpo en la ecuación. $ ('# subject'). offset (). top es suficiente.

ali6p

jQuery desplazarse al elemento

Respuestas: