4

Estoy buscando una forma de scrollear hacia un elemento con una animacion smooth. Para ello me he auxiliado de este sitio.

 function scroll() {
     const a = document.getElementById("p");
     a.scrollIntoView({
         behavior: "smooth"
     })
 }
<button id="button"  onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph  </p>

Hay una forma de anadir una animacion a la accion escrolear, usando javascript o css solamente?, preferentemente javascript. Tambien, que la accion smooth scroll no sea solo a un elemento, sino tambien pixeles hacia alguna direccion? Pd: Uso la animacion como me dice en el sitio, pero no me funciona, alguien sabe por que puede ser?

4
  • ¿Te refieres a que haga un efecto de ir a un elemento pero no de golpe, verdad? Commented el 21 jul. 2017 a las 20:33
  • @FranciscoRomero exactamente.
    – Theia
    Commented el 21 jul. 2017 a las 20:34
  • Hace un tiempo ya hice un modulo de npm para esto (scroll-utility). Ofrece bastantes opciones y es facil de usar. Soporta practicamente todos los browsers y dispositivos moviles, excepto los muy viejos. Otra alternativa es zenscroll Mientras que esto no responde exactamente la pregunta, puede ser de interes para aquellos que vengan buscando una solucion.
    – Theia
    Commented el 25 dic. 2018 a las 21:39
  • Hay una propiedad CSS para eso: scroll-behavior: smooth;. El problema es que no tiene soporte para todos los navegadores ni se puede ajustar la animación de ninguna manera, por eso no lo pongo como respuesta pero lo comento porque puede ser una alternativa en algún caso concreto.
    – user7176
    Commented el 26 dic. 2018 a las 8:40

1 respuesta 1

6

Puedes usar jquery para animar el scroll.

usando el metodo animate le dices el tiempo que quieres que tarde.

Por ejemplo poniendo 500 tardaría medio segundo al estar usando milisegundos.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#p").offset().top
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Para lo que pides de poder pasar una unidad y que se desplace pixeles en vez de a un elemento, puedes decir que se mueva hasta el elemento que haces click y una cantidad de pixeles extra.

La dirección sería con el + o el -. Siendo hacia abajo y hacia arriba respectivamente.

function scroll() {

  $('html, body').animate({
      scrollTop: $("#button").offset().top + 500
    },
    500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scroll()"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Respecto a por que no te funciona tu smooth quizá sea porque solo tiene compatibilidad con Firefox. (mira la tabla de compatibilidad del link que pusiste)


Sin jQuery encontré esta funcion recursiva. Lo hace aunque lo de smooth es cuestionable ahahha

function scrollTo(duration) {
    var element = document.body;
    var to = document.getElementById("p").offsetTop;
    
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo( duration - 10);
    }, 10);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" onclick="scrollTo(600)"> myButton </button>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<div style="height: 500px;"></div>
<p> parragraph </p>
<p> parragraph </p>
<p> parragraph </p>
<p id="p"> myParragraph </p>

<div style="height: 1500px;"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.