¿Cómo hacer scroll con JavaScript y HTML?

Aquí les traigo un tutorial de formas para hacer scroll a tu página espero que os funcione y disfrutéis.

Scroll con anclas HTML

<div id="ancla"> <!--id del elemento al cual quieres hacer scroll --> 
</div> 
<!-- Contenido de relleno para obtener scroll --> 
<a href="#ancla">Ir Hacia arriba</a>

Este ejemplo haría scroll hacia el elemento que tenga como id ancla

Funciona estableciendo un id al elemento al cual se desea hacer scroll y un elemento <a> cuyo atributo href va a tener el valor del símbolo #+el id del elemento

Por ejemplo queremos desplazarnos hacia el final de la página bastaría con

Crear un elemento (ya sea un div,canvas,img etc) con un id en este caso le pondré id="hola" ustedes pueden poner el que más os guste quedaría algo así <div id="hola"></div>.
Ubicar dicho elemento al final de todo el contenido (para este ejemplo)
Crear un elemento <a>con el atributo href="#+id de tu elemento" quedaría algo así
```
<a href="#hola">Ir Hacia abajo</a>
```
Tener en la página suficiente contenido para tener la barra de desplazamiento

Ahora es hora de probarlo acá está el código completo

<a href="#hola">Ir Hacia abajo</a>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione fuga libero, ipsam saepe et suscipit exercitationem error consequatur porro cumque, atque accusamus eaque. Autem reiciendis omnis quasi repudiandae commodi deleniti recusandae optio rem quisquam esse praesentium eius voluptas animi dolorem, explicabo ut iste error nulla, incidunt distinctio aliquid non! Nulla excepturi doloribus labore accusantium quia facere quaerat dolorum quis. Assumenda beatae quasi deleniti commodi sed! Perspiciatis voluptatum ad quaerat nemo culpa, nihil recusandae, optio incidunt impedit sequi, reprehenderit sit tenetur? 
<div id="hola"></div>

Vista previa

Ir Hacia abajo Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione fuga libero, ipsam saepe et suscipit exercitationem error consequatur porro cumque, atque accusamus eaque. Autem reiciendis omnis quasi repudiandae commodi deleniti recusandae optio rem quisquam esse praesentium eius voluptas animi dolorem, explicabo ut iste error nulla, incidunt distinctio aliquid non! Nulla excepturi doloribus labore accusantium quia facere quaerat dolorum quis. Assumenda beatae quasi deleniti commodi sed! Perspiciatis voluptatum ad quaerat nemo culpa, nihil recusandae, optio incidunt impedit sequi, reprehenderit sit tenetur?

De sobras esta decir que Lorem, ipsum es contenido de prueba para que la web tenga scroll y hay también que destacar que el div puede tener contenido dentro no es inconveniente alguno , en este ejemplo se abarca el scroll en vertical el más común en la web pero también se puede lograr en el eje de las abscisas(x) simplemente donde este el elemento va a ir el scroll a ubicarlo :)

Scroll con JavaScript

En JavaScript existen 3 métodos pero scroll() ya está en desuso y ha sido reemplazado por window.scrollTo(posx,posy); por lo que tendríamos 2:

window.scrollTo(posx,posy);

window.scrollBy(numx,numy);

Diferencia entre ambos

scrollTo():Hace scroll a unas coordenadas específicas ,recibe dos parámetros numéricos las coordenadas de la posición x y posición y el cual quieres que se desplace el scroll

scrollBy():Hace scroll un numero de pixeles determinados, , recibe dos parámetros numérico con la cantidad de pixeles en x y la cantidad de pixeles en y el cual quieres que se desplace el scroll

Muy teórico veamos las diferencias y sus funciones en práctica

scrollTo()

<!-- Contenido de relleno para obtener scroll --> 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam esse aut, sunt architecto eius sequi saepe. Tempora reiciendis dicta aliquid natus a dolores atque soluta iste, fugiat odit suscipit laudantium facilis adipisci nesciunt eum nisi! Sit vel praesentium, iste totam eum at officia optio, quis odio, dolores deleniti voluptate veniam! Deserunt, a doloribus reiciendis excepturi neque modi voluptatem. Nam officia cumque amet velit impedit magni porro mollitia magnam eius? Quibusdam fuga autem minus, laudantium, impedit, quis dolorem laborum ab quas iusto odit amet praesentium fugit esse! Quisquam, cupiditate culpa inventore ab ipsum blanditiis sint excepturi cumque rerum iure enim exercitationem!
<script>
window.scrollTo(0, 100);
</script>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi odio sit dicta omnis voluptatum odit, sed ex quibusdam vitae culpa corrupti voluptate nihil pariatur, molestias iste laboriosam maiores facilis esse ducimus expedita itaque deserunt tempore eveniet aut! Hic vero esse ullam nobis repellat, a numquam beatae sint non earum. Fuga voluptatibus molestias ullam porro numquam modi doloremque excepturi atque animi adipisci illo ab, recusandae ipsam repellat quis commodi, minima ipsa id! Cupiditate cum animi, dolorem beatae asperiores iste possimus earum provident, obcaecati aliquam vel molestiae harum repellat deserunt reiciendis laudantium rem necessitatibus adipisci tenetur, doloremque corrupti magni nulla. Odio error laudantium mollitia ducimus ut accusamus? Laborum eveniet aspernatur natus. Perspiciatis amet quos commodi illum recusandae, voluptas ut. Cumque natus sed quaerat vel ducimus ab repellat repellendus inventore porro, enim at dolorum facilis voluptatum rerum! Cum corrupti minima quibusdam asperiores illum. Ipsa eveniet architecto, quaerat quidem unde corporis dolorem. Quod nihil harum maxime iusto sint obcaecati neque natus consequuntur quos accusantium officiis esse, labore, animi numquam quae odio rem at incidunt! Nesciunt consequuntur repellendus ullam voluptas blanditiis eveniet officiis, minus cumque numquam possimus facere vitae eligendi iure repudiandae necessitatibus dicta perspiciatis, cupiditate ducimus? Minus ratione voluptates provident impedit molestias consequatur, eum velit delectus sint blanditiis obcaecati praesentium doloremque! Modi pariatur velit fugit, vitae repellat porro ullam? Non error possimus, aliquam amet illo voluptatibus unde rerum nisi fuga ducimus similique cupiditate est porro itaque in quibusdam fugiat dolorum nam aperiam officiis reiciendis quia accusamus? Enim natus ullam porro aliquid similique aperiam provident mollitia magnam dolore perferendis laborum voluptates inventore, cum quo delectus maiores iste eos unde suscipit veniam laudantium atque deleniti. Minima, cupiditate itaque! Voluptatibus illo eligendi est fugit qui praesentium consectetur aspernatur aliquid eius temporibus! Ad quis cupiditate ut perferendis mollitia porro dicta dolores, expedita eaque iste temporibus consequatur sit itaque, ea illo. Assumenda deleniti ullam iure recusandae alias molestiae cum aut delectus sit? Maiores itaque error, aliquam, porro possimus placeat nam quae architecto ipsa distinctio provident nesciunt voluptates dolorem asperiores. Doloremque temporibus, suscipit vel consectetur unde explicabo odit dicta quos, sunt eaque sapiente enim consequatur natus magnam hic totam. Cumque ratione sit, quia doloribus quas minima molestias, laudantium nostrum reiciendis quae explicabo, nisi aspernatur veniam dicta rerum alias officia. Quaerat, totam! Molestias cum provident ab consequatur totam animi quaerat suscipit repellendus hic harum? Illum harum quibusdam, nihil aut quo quia ut? Laborum reprehenderit culpa praesentium quos libero aspernatur fuga, molestiae amet aperiam ullam officia quae ex fugiat, incidunt dolor hic perspiciatis. Itaque atque, eaque pariatur quos maiores quasi culpa voluptas. Eaque nihil delectus tempore veritatis quisquam ut culpa totam ex dolorum molestiae. Laborum eaque nostrum a at unde mollitia quia, enim dolorem dicta, eos vel magni. Quas, qui, modi officiis ipsum commodi laborum laudantium sequi, pariatur nostrum optio repellendus dolorum similique odit facilis tenetur laboriosam sit ducimus non minima? Asperiores voluptates suscipit soluta dolores, eum minima dolor accusantium fugit? Voluptatum eos ab maxime fuga itaque dolores rem et debitis. Consequuntur voluptatem aut odit nobis accusantium atque illum ea, quia similique cupiditate reiciendis quisquam iure sint omnis nihil mollitia. In vel necessitatibus veritatis eligendi temporibus possimus reprehenderit reiciendis magnam dolorum sequi qui blanditiis incidunt aperiam maiores, dignissimos rem vitae ratione ipsam error neque! Voluptas at harum soluta vitae deleniti enim, magnam ullam ut ratione optio voluptatem, nisi nostrum doloribus nam dolor amet eum quasi eius cumque quos! Eum suscipit libero reprehenderit cum aut vel incidunt nam sit veritatis, tenetur iure nostrum fugiat quos modi, repellat non maxime, odio dolorem cumque sint distinctio corrupti minus? Debitis totam laborum provident labore asperiores, aliquam iste quia. Voluptates enim nostrum exercitationem dolorum sunt eum perferendis commodi tenetur aperiam officiis ab cumque, rerum sint distinctio laboriosam cum ut deleniti suscipit! A suscipit et doloremque adipisci laboriosam minima molestias quidem, tempore dolores autem nesciunt ipsum optio at sapiente assumenda consectetur vero maxime natus saepe cupiditate. Voluptatem veritatis itaque dolores accusantium eligendi pariatur possimus odit placeat sunt recusandae, iste quo nisi sapiente soluta provident iure. Cupiditate quod, corrupti adipisci aperiam sunt expedita commodi rerum, id molestiae dolorum veritatis saepe cumque eaque tempore doloribus placeat impedit voluptatem, unde aliquam totam voluptatibus numquam incidunt atque? Facilis eligendi soluta deleniti adipisci ab iste impedit harum dolor suscipit. Soluta quos ex, sunt, cumque quae vero ipsa obcaecati laboriosam nesciunt, minima tempora est fugiat neque! Placeat, itaque aut recusandae totam perferendis illo impedit delectus excepturi quaerat, voluptas porro mollitia ipsam pariatur eveniet deleniti optio corrupti! Quam, vero. Alias nobis eveniet doloribus explicabo veritatis ratione voluptatum repellendus voluptates non placeat, reprehenderit enim magni qui architecto aliquid ad distinctio ab quibusdam. Molestias harum veritatis dignissimos aliquam praesentium laborum illo, atque dolore perferendis optio tempore repellat explicabo iure facere, reiciendis commodi maiores amet provident fugit est quae. Dolore expedita repudiandae fuga illo ratione dolor quos corrupti provident voluptate. Mollitia eius nihil nam sed, minus natus nobis cumque in pariatur eligendi molestiae laudantium numquam repudiandae quis iusto magni consequatur asperiores cum est, at fugit, nisi libero voluptates? Illum deleniti maxime itaque neque temporibus quaerat tenetur dolorum magni? Dicta at similique neque, repellat quae earum harum in modi excepturi adipisci qui eligendi assumenda? Eaque quaerat minima animi officiis repudiandae nesciunt quibusdam vel quod! At optio accusamus exercitationem. Placeat accusamus non quod tempore odio recusandae doloremque nesciunt, natus excepturi est nihil debitis dolorem dolor corporis ipsam deserunt cupiditate harum quae saepe minus rem quos quasi fuga eaque. Nihil placeat fugit earum vel rem fuga. Suscipit provident ea placeat totam laudantium unde error, iure est. Totam ipsum atque ea quas, sint explicabo amet commodi vero, deleniti perspiciatis beatae. Praesentium delectus, in quo, aperiam voluptatibus voluptate eius corrupti voluptas repellendus asperiores at ex neque ut vero quasi magnam eaque officiis laborum tempora alias ipsa temporibus veritatis sunt tenetur! Cum veritatis perferendis ut quae, iure assumenda tenetur necessitatibus alias? Repellat qui nulla similique officia hic aperiam, quod sed officiis quas. Obcaecati ratione nemo quod quibusdam fuga, provident sed recusandae consequatur asperiores voluptatem assumenda cum dolor! In expedita ipsum nostrum dolorum debitis eos voluptatum, quod, porro tenetur nam vero! Animi ratione hic consequatur quaerat dolore, nihil at nemo facilis laborum numquam non. Illo ipsum unde, dolorum labore quisquam eaque asperiores laborum ut rerum deleniti. Quisquam dolorum provident nobis deserunt rem, quas beatae, dolores fugit numquam voluptatum quibusdam libero nihil ut eum non! Aperiam vero reprehenderit asperiores autem optio cum aut temporibus, omnis odio ex et corrupti suscipit repellat voluptatibus recusandae aliquam eaque nobis odit debitis quasi possimus minus, magni eos illo. Optio molestias praesentium, inventore doloribus enim sit? Quasi hic temporibus dignissimos iure facilis et sit voluptatem cum quos assumenda odit, earum deserunt laudantium iste dolorem? Incidunt repellendus aliquam saepe, minus aut ipsam quam aliquid in molestias placeat? Ab reiciendis cumque ipsam fugiat quia repellendus est, deleniti nemo ad fuga, quam doloremque adipisci harum illum tempora maxime quibusdam totam natus quaerat quae atque corrupti? Sapiente quasi consequatur vero esse dolore numquam culpa iure nisi facilis assumenda. Alias porro consectetur temporibus sit incidunt, dolorum aut odio esse ullam culpa distinctio dicta, quaerat unde doloremque, libero veniam dolore amet quae? Nam ullam fugit repudiandae sunt inventore earum laudantium cum molestias sit error. Voluptates adipisci architecto blanditiis temporibus reprehenderit provident dignissimos cum numquam officia, ducimus eaque hic repellat fugiat fuga sapiente, dolores dolore ut nisi voluptas doloribus quasi alias. Labore adipisci inventore harum repellendus eius, ducimus, dignissimos consectetur ea reprehenderit aliquid fugit rerum eos cupiditate totam temporibus suscipit deleniti voluptatem magni impedit? Saepe praesentium, cum mollitia omnis neque reprehenderit ad ratione amet sapiente suscipit reiciendis est magni vel distinctio dolorem eveniet incidunt sit iure ipsa vitae quam obcaecati ut alias voluptas. Sequi consequatur, architecto in et quas facilis provident ab officia repudiandae distinctio fuga ullam! Ex recusandae vel facilis dignissimos culpa rem excepturi amet consequatur illum, aperiam natus adipisci dolor ipsum fugit animi vero consequuntur possimus debitis! Eos, nisi impedit totam consectetur, pariatur laudantium modi voluptatem iure sint minima fugiat porro dolorum, autem asperiores adipisci? Illo nulla minus eius possimus, magni vel quibusdam voluptate nobis molestias, ullam incidunt odio quaerat laudantium enim! Sed sit mollitia obcaecati officia doloremque expedita culpa sapiente alias voluptates, laboriosam similique unde, distinctio totam nemo tempora labore qui, sequi voluptatem suscipit maxime! Vero a commodi laborum, fugit enim aperiam placeat eius nam excepturi eligendi molestias modi vel ex temporibus recusandae, rem aspernatur illum iusto velit quaerat praesentium id accusamus eaque porro. Inventore culpa voluptatem cupiditate laboriosam, dolorem rerum ab doloremque aperiam unde, debitis minus, quasi magnam error expedita pariatur deleniti repudiandae. Dolor, quibusdam! Asperiores aut dolorum vitae natus cumque provident consectetur enim necessitatibus, voluptas nostrum! Fugit eligendi nesciunt autem fugiat inventore dignissimos. Laborum doloremque voluptas aperiam velit quod, cupiditate fuga labore provident sit cumque sint accusantium error nesciunt ullam cum magni quibusdam iure at unde delectus architecto nisi accusamus. Sed neque expedita odio ut molestiae officia corporis deserunt officiis consectetur! Aspernatur nemo consequuntur hic est eos soluta corporis labore sint architecto sunt quam molestiae, atque pariatur officiis reiciendis quibusdam eligendi accusamus obcaecati odit accusantium ipsam explicabo tempora. Adipisci obcaecati, in delectus libero quam consequuntur nemo corporis ipsum harum. Dolorum cupiditate debitis nobis iusto, dolores modi, earum dolor magni ea necessitatibus quidem totam amet deserunt. Soluta sit esse obcaecati temporibus, et asperiores incidunt minima quasi magni! Accusantium harum eum excepturi quaerat commodi sed dicta magnam, saepe autem nobis ut, deleniti officiis repellat aperiam impedit voluptas blanditiis laudantium doloremque laboriosam cumque expedita molestias? Mollitia sapiente ducimus dicta ea repellendus dolores quasi magni. Sed blanditiis, libero quos odit ipsum atque natus soluta aliquid deleniti illum fugiat maiores? Ad libero qui suscipit dolores explicabo provident vitae deserunt hic dolor corporis fuga itaque architecto officiis, numquam, delectus rem ullam nobis earum blanditiis culpa quis tenetur? Nulla quis fugiat harum eaque nihil, porro numquam molestias cumque ratione. Magnam mollitia nobis asperiores adipisci ipsa beatae accusantium odit minima maxime nostrum laborum, ipsam, culpa laboriosam. Exercitationem similique ipsa provident ipsam, reiciendis cum cupiditate co !

Si ingresamos este código en vuestra página quizás no notaste nada y en el ejemplo tampoco pero acaba de suceder, cuando carga el script hizo scroll hasta la coordenada 100 en Y pero no lo notamos porque ya estaba cuando cargo la página creemos una función para notar la diferencia

<!-- Ya saben que aquí ponemos un contenido para que tengamos un scroll para probar esto-->
<script>
    function hacerClickWindow(){
        
window.scrollTo(0, 100);
    
}
   
window.addEventListener("click",hacerClickWindow)
</script>

Ahora si cada vez que hagamos scroll a donde sea pero tocamos click en cualquier parte de la pantalla la barra de desplazamiento ira a esas coordenadas.

Lo mismo pasaría con el eje de las X de tener barra de desplazamiento en ese eje cambiaríamos el 0 de window.scrollTo(0, 100); por la coordenada que necesitemos utilizar

Hagamos un ejemplo sencillo de botón que nos sube hacia el principio de nuestra página, usaremos CSS para darle estilo y posición al botón así como JavaScript con y HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botón Scroll</title>
</head>
<body>
 <div id="boton_scroll">&#8593;</div>
 <style>
    #boton_scroll{
        position: fixed;
        padding: 5px 15px;
        background-color:rgb(87, 183, 228) ;
        bottom:15px;
        right: 15px;
        cursor:pointer;
        text-align: center;
        font-size:25px;
        box-shadow: 2px 2px 5px 2px rgba(75, 74, 74, 0.486);
        border-radius:20px;
    }
</style>
<script>
    document.getElementById("boton_scroll").addEventListener("click",irArriba);
    function irArriba(){
        window.scrollTo(0,0);
    }
</script>
</body>
</html>

↑

Sé que el botón no es lo más hermoso del mundo pero se capta el concepto que es lo importante y de tarea rellenar para poder probar el ejemplo

scrollBy()

Buscar este blog

Programación web

¿Cómo ocultar mouse pasado un tiempo JavaScript?