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>
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
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">↑</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()
Comentarios
Publicar un comentario