Skip to main content
2 de 4
se eliminaron 46 caracteres en el cuerpo
lois6b
  • 7.6k
  • 5
  • 33
  • 54

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.

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)

lois6b
  • 7.6k
  • 5
  • 33
  • 54