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