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.


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function scroll() {

      $('html, body').animate({
          scrollTop: $("#p").offset().top
        },
        500);
    }

<!-- language: lang-html -->

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

<!-- end snippet -->

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.


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function scroll() {

      $('html, body').animate({
          scrollTop: $("#button").offset().top + 500
        },
        500);
    }

<!-- language: lang-html -->

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

<!-- end snippet -->

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)