javascript - página - jQuery desplazarse al elemento

scroll animado jquery

Question

Tengo este elemento de input :

<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 esa input con #subject , la página debe desplazarse hasta el último elemento de la página con una animación agradable. Debe ser un desplazamiento hacia abajo y no hacia arriba.

El último elemento de la página es un botón de submit 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 plugin sino usar las funciones predeterminadas de jQuery para lograr esto.

Answer 1

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 animación agradable. 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 a #submit luego se restaurará el cursor a la entrada en la que se hizo clic, que simula 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 la función de focus imitar la animación de una mejor manera, mediante el encadenamiento de llamadas de focus ? No he probado esta teoría, pero se vería algo como esto:

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

Answer 2

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

Answer 3

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

$("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 la carga, si hay un hash en la dirección, nos desplazamos a ella.

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

Answer 4

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 la ayuda de las siguientes publicaciones de SO:

• offset-top-of-an-element-without-jquery

• scrolltop-animation-without-jquery

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

Answer 5

Echa un vistazo a la ScrollTo plugin. Puedes ver la demo .

Espero que ayude.

Answer 6

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

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

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

Es malo el 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 inicio de la animación está cerca del elemento de destino, la animación es extremadamente 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 bruscamente entonces, en medio del movimiento.

Para manejar estos problemas (y elsewhere ), puedes usar un complemento mío, jQuery.scrollable . 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 en cuenta un borde en el elemento html ( vea esta demostración ). Si necesita que la posición de destino sea precisa en cualquier circunstancia, es mejor utilizar

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

Eso funciona incluso si se establece un borde en el elemento html .

Answer 7

Escribí una función de propósito general que se desplaza hacia 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);
};

Answer 8

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

Answer 9

Este es mi enfoque que abstrae los ID y href, utilizando 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>

Answer 10

Esto funcionó para mí:

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

Answer 11

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

Pero en algunos casos, puede que tenga que convertir el valor a un entero. Curiosamente, el valor devuelto desde $("...").offset().top veces está en float .
Utilice: parseInt($("....").offset().top)

Por ejemplo:

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

Answer 12

Muy simple y fácil de usar plugin jQuery personalizado. Simplemente agregue el atributo scroll= a su elemento seleccionable y establezca su valor en el selector al que desea desplazarse.

Así: <a scroll="#product">Click me</a> . Puede ser utilizado 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>

Answer 13

Para 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 elementos particulares con desbordamiento: automático; dentro de un diseño más grande.

Crea una entrada falsa de la altura del elemento objetivo, y luego se enfoca en él, y el navegador se ocupará del resto, sin importar qué tan 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();

Answer 14

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

Answer 15

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 hacerlo:

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

container.animate({
  scrollTop: pos
}

Answer 16

Si no está muy interesado en el efecto de desplazamiento suave y solo está interesado en desplazarse a un elemento en particular, no necesita una 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 necesita hacer es: $("selector").get(0).scrollIntoView();

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

Answer 17

Si solo está manejando el desplazamiento hacia un elemento de entrada, puede usar 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!

Answer 18

Suponiendo que tiene un botón con el button identificación, pruebe este ejemplo:

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

Obtuve el código del artículo Desplazar 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>

Answer 19

Una forma sencilla de lograr el desplazamiento de la página a la ID del div objetivo

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

Answer 20

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

Answer 21

Usando este simple script

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

Haría ordenado que si se encuentra una etiqueta hash en la url, el scrollTo animar a la ID. Si no se encuentra la etiqueta hash, ignore el script.

Answer 22

jQuery .scrollTo ():

Escribí este complemento ligero para hacer que el desplazamiento de página / elemento sea mucho más fácil. Es flexible donde podría 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 el espaciado adicional sobre el objetivo de desplazamiento.

duración : una cadena o número que determina la duración de la animación.

suavizado : una cadena que indica qué función de suavizado se debe utilizar para la transición.

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

Answer 23

$(''html, body'').animate(...) no funciona para mí en el navegador de safari para iPhone, Android Chrome.

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

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

Aquí 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 del cuerpo conectado con un #content div

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

Answer 24

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>

Answer 25

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

Answer 26

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

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