JS para desplazamiento suave hasta el final de la página

Tengo un JS para hacer un desplazamiento suave desde la parte inferior de la página hasta la parte superior con esto y funciona:

<script>

     $("a[href="#top"]").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return true;
  });
</script>

Pero ahora quiero hacer un desplazamiento suave de arriba hacia abajo, lo probé con esto:

 <script>

     $("a[href="#footer"]").click(function() {
     $("html, body").animate({ scrollToBottom: 0 }, "slow");
     return true;
  });
</script>`

No funciona, no es un scroll fluido. ¿Alguien sabe qué tiene de malo esto?

Con JS puro:

 window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })

y hacia arriba como:

 window.scrollTo({ top: 0, behavior: 'smooth' })

No hay tal cosa como scrollToBottom. Prueba esto:

$("html, body").animate({ scrollTop: document.body.scrollHeight }, "slow");

Para obtener una lista más completa de métodos para un desplazamiento suave, consulte mi respuesta aquí.

Para desplazarse hasta la parte inferior de la página, la posición y se puede establecer en document.scrollingElement.scrollHeight.

Para desplazarse a una determinada posición en una cantidad exacta de tiempo, window.requestAnimationFrame se puede poner en uso, calculando la posición actual adecuada cada vez. setTimeout se puede utilizar con un efecto similar cuando requestAnimationFrame no es apoyado.

/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

document.querySelector('button').addEventListener('click', function(e){
  scrollToSmoothly(document.scrollingElement.scrollHeight, 1000);
});

html, body {
  height: 5000px;
}

<button>Scroll to bottom</button>

los Biblioteca SmoothScroll.js también se puede usar, que maneja casos más complejos, como desplazamiento suave tanto vertical como horizontalmente, desplazamiento dentro de otros elementos del contenedor, diferentes comportamientos de aceleración, desplazamiento relativo desde la posición actual y más.

smoothScroll({yPos: 'end', duration: 1000});

document.querySelector('button').addEventListener('click', function(e){
  smoothScroll({yPos: 'end', duration: 1000});
});

html, body {
  height: 5000px;
}

<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button>Scroll to bottom</button>

// Scroll smoothly to the bottom
domElement.scrollTo({
  top: document.body.scrollHeight,
  behavior: 'smooth',
})

Todas las opciones para scrollTo son:

• top: number
• left: number
• behavior: 'smooth' o behavior: 'auto'

La respuesta aceptada y otras son correctas, pero quería agregar otro caso de uso que podría ayudar a alguien.

En algunos casos, deberá desplazarse dentro de un setTimeout()devolución de llamada con un breve retraso.

function scrollToBottom() {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}

setTimeout(function() { scrollToBottom(); }, 100);

Por ejemplo: usted tiene un <button> que añade un <div> elemento en la parte inferior de la página cuando se hace clic en él, y desea desplazarse hasta la parte inferior para que el usuario pueda ver este nuevo div. En este caso, a veces (depende del comportamiento del bucle de eventos), necesitará hacer el desplazamiento dentro de un setTimeout() porque la misma acción que activa el desplazamiento en realidad cambia el valor de document.body.scrollHeight. Al retrasarlo, hace que use el nuevo valor actualizado de document.body.scrollHeight después de agregar el div.