body{
margin: 0;
}
html {
scroll-behavior: smooth;
}
.blockscrolls{
position: fixed;
right: 5px;
top: 50%;
width: 50px;
z-index: 99;
}
.blockscrolls a{
display: block;
margin: 10px 0;
width: 50px;
height: 50px;
background-color: #333;
border: 1px solid #000;
text-align: center;
color: #FFF;
text-decoration: none;
}
.blockscrolls a:fover{
background-color: #777;
}
header{
background-color: #777;
}
footer{
background-color: pink;
}
<div class="blockscrolls">
<a href="#top">Top</a>
<a href="#bottom">Bottom</a>
</div>
<header id="top">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores non inventore facilis provident amet aliquid ipsum sed, minus voluptatum hic suscipit, deleniti ipsam omnis alias exercitationem a quos nostrum soluta.</div>
<div>Ab dignissimos tenetur repellendus blanditiis nemo fugit vitae quo eaque, corrupti eos, nam quos voluptatum similique amet ipsa! Eveniet dicta impedit quis natus quod consequuntur iste vitae non ipsam magnam?</div>
<div>Nostrum deserunt, culpa fuga ut nulla ipsa non quia similique et quibusdam labore, consequuntur incidunt, rerum ullam aut corporis porro excepturi beatae dolore temporibus? Praesentium labore cupiditate dolore a libero.</div>
<div>Architecto molestias error harum iste blanditiis provident magnam, illo atque sequi. Eaque quaerat non nihil ipsa voluptates laborum sunt, similique dignissimos, laudantium, sed itaque earum reiciendis ea odio sint architecto.</div>
<div>Consequatur iusto itaque, quod voluptatibus eligendi perspiciatis similique aliquid facilis nostrum sequi ad voluptatum ratione labore natus dolor alias molestiae eveniet exercitationem laudantium. Repellendus quidem, saepe animi. Consequatur, necessitatibus, omnis?</div>
<div>Officia, rerum, harum vero maxime ipsa voluptas fugit saepe sequi sapiente tenetur nostrum quis dolores nisi! Iure veritatis dicta recusandae quia libero accusamus ex, aspernatur velit sunt, hic, est, officia.</div>
<div>Voluptatum quidem harum accusantium. Porro obcaecati ad, deserunt delectus facere aliquid soluta sed et labore, excepturi optio velit laborum autem inventore consectetur sunt sint eaque omnis voluptate. Nobis, excepturi, voluptate.</div>
<div>Dolores animi illo, eaque ea, a nisi dicta explicabo, non accusamus impedit eos, ratione qui voluptatibus. Sapiente consequuntur, explicabo est natus nesciunt nemo alias? Reprehenderit eligendi laborum numquam veniam eum?</div>
<div>Ut cum optio sapiente quas temporibus debitis, ullam quos expedita asperiores sit ipsa rem, dolorum exercitationem numquam. Placeat unde commodi numquam voluptatem tenetur, cupiditate quasi quaerat similique voluptates, reprehenderit amet?</div>
<div>Voluptatibus quisquam, facere quaerat adipisci ab, ratione praesentium assumenda nam tenetur hic consequatur aperiam voluptatum rerum voluptatem eum placeat eius! Libero iure, fuga tempore quo inventore aliquam obcaecati pariatur nesciunt!</div>
</header>
<main><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus labore modi similique qui aspernatur beatae, totam molestiae tempora, facere cupiditate natus a voluptate. Quae, eius qui earum sit ullam cupiditate.</div>
<div>Dolore fugiat saepe, aliquid vitae consequuntur. Dignissimos vel velit, ipsum, error assumenda magnam voluptas minima voluptates, quisquam nisi nemo. Esse eos sed magnam ducimus, obcaecati sit cupiditate! Alias, dignissimos, dolore?</div>
<div>Voluptatem culpa magnam accusamus quis suscipit, voluptates aperiam exercitationem quasi fugiat blanditiis, repellendus fuga repellat quidem iste temporibus, doloribus saepe, enim similique! Officia expedita rem, fugit dicta rerum ad placeat.</div>
<div>Eligendi, accusantium. Asperiores quam possimus doloremque deserunt dignissimos eligendi qui animi dolor expedita, illum in. Impedit repellendus nihil veniam autem nesciunt, animi veritatis ab. Dolorum inventore harum, ab impedit vitae!</div>
<div>Totam cum repudiandae a, eos minus debitis praesentium beatae quo quod ex, aliquid itaque alias placeat inventore ut earum, nisi ratione. Placeat dolorum maiores aperiam eius, laudantium dicta quibusdam nemo!</div>
<div>Libero ad provident tempore, porro ex sequi maiores eveniet, corrupti aliquam officiis aliquid odit, veritatis repellendus iste a voluptates. Maiores, numquam. Perspiciatis veritatis vero laudantium? Aliquid magni enim, est aut.</div>
<div>Explicabo facere temporibus voluptate totam, harum, ut ratione! Voluptates a rem tempora sunt id pariatur vel nisi ex, ab nam eveniet recusandae quis quam debitis ullam adipisci mollitia itaque aperiam.</div>
<div>Ducimus voluptas maiores laboriosam. Porro consequuntur, quisquam modi perferendis similique eligendi iusto nobis dolores quos laborum. Consequatur distinctio cumque, odio nihil, voluptate recusandae sunt quas architecto dignissimos dolores laborum eos!</div>
<div>Blanditiis cupiditate debitis optio mollitia, laudantium porro, reiciendis labore vel sapiente sed amet fuga voluptates dolores aspernatur tenetur. Id praesentium fugiat laborum officia distinctio quidem odit accusamus, error laudantium quos.</div>
<div>Sit quidem vitae, expedita hic illum obcaecati reiciendis? Ipsum non, repellendus, cupiditate modi dolorem explicabo vitae consequatur reprehenderit eligendi nemo debitis quis tempora consequuntur amet soluta repellat adipisci sed ratione.</div>
<div>Similique ratione atque alias minus officiis, id harum saepe error quasi ducimus, laboriosam, nisi eum, earum accusantium. Repellendus ex in, placeat excepturi praesentium, nam, nisi sed adipisci doloribus modi illum.</div>
<div>Et distinctio quas itaque voluptates eveniet unde dolore, voluptas blanditiis consectetur minus nisi minima odit iusto, repellendus nulla veritatis eligendi, error! Tenetur possimus, a architecto magnam accusamus soluta cum officia.</div>
<div>Rerum voluptas ex odit repudiandae, harum eveniet quasi animi sunt alias tempore nisi, aliquid vel, expedita eum dolores voluptates non optio. Dolor ducimus magnam eos voluptates veniam non ratione blanditiis.</div>
<div>Dolor magni quia inventore fugit nobis quis praesentium sint voluptas maiores totam excepturi deserunt non, blanditiis, eos, soluta, quas ut? Temporibus sapiente iste praesentium eos ea laudantium. Quidem, architecto cupiditate!</div>
<div>Accusamus repudiandae non tenetur nam doloremque quam libero commodi ullam expedita, quis repellat quaerat, dolorem. Obcaecati magnam dolore labore mollitia autem dolor. Quidem cum molestias, soluta voluptatibus! Repellendus, quam, omnis.</div>
<div>Rem similique veritatis doloribus ab corrupti dignissimos, cum minima! Est illo omnis, dolorum quae autem saepe, adipisci possimus. Labore possimus, totam quam cumque adipisci animi ipsum sunt voluptatem quidem odio!</div>
<div>Neque doloribus nemo temporibus repellendus, illo saepe eligendi esse praesentium sapiente tenetur. Neque dolore quae suscipit, praesentium sunt. Obcaecati doloremque reiciendis, necessitatibus eum mollitia reprehenderit quas ipsum, veniam magni porro.</div>
<div>Quis placeat labore corporis provident veniam vero officiis illo dolorem earum modi dolorum quibusdam fugit enim perspiciatis rem sapiente laudantium velit, consectetur maiores similique magni facilis! Sint autem, incidunt ducimus.</div>
<div>Quas esse harum laborum quos itaque distinctio cum, totam accusamus consectetur similique placeat? Itaque quia laboriosam architecto suscipit tempore in dolores dolorum qui optio. Autem tempore nulla aliquam, modi maiores.</div>
<div>Hic numquam illo similique ex odit? Odio, adipisci ab voluptatibus fugit et voluptatum debitis cum earum consectetur repellendus quod corrupti quo, aut, tenetur natus eum iste odit mollitia. Corporis, enim.</div>
<div>Odio labore temporibus eum fuga cumque perspiciatis dolorum debitis excepturi omnis iusto quisquam pariatur, sapiente provident voluptates placeat, doloremque repellendus cum nam mollitia rem, laudantium neque deserunt veritatis, eligendi recusandae.</div>
<div>Tenetur assumenda itaque quae ea voluptate possimus, accusantium voluptatum! Consectetur voluptate recusandae, libero natus voluptatibus eligendi ipsa officiis ut, nisi quos aspernatur quidem, sed neque sapiente quia. Incidunt, veniam aperiam!</div>
<div>Tempora sequi excepturi minus explicabo, expedita doloremque cupiditate soluta possimus! Sapiente, laborum! Impedit quas repellendus, praesentium quos dolorem eaque ab sed ullam tempora cumque, illum facere fugiat architecto exercitationem libero!</div>
<div>Odit sit praesentium dolorem aliquam, non nam consequatur suscipit quo, voluptates architecto iste hic, harum quae consectetur. Aperiam, delectus ea inventore. Id necessitatibus tenetur eveniet fugiat facere ad aliquam dolorum.</div>
<div>Laudantium quod eaque fuga, sequi, culpa molestias blanditiis aliquam enim, soluta facere libero. Impedit dignissimos at optio quae adipisci atque explicabo mollitia provident ut, quaerat tempora in, molestiae officiis, consequuntur.</div>
<div>Libero dolor laborum, error, soluta dicta corporis incidunt possimus temporibus ut, accusantium eligendi deserunt architecto omnis odio ea rem praesentium tempore est! Inventore eveniet, dolore cumque, fuga doloribus magni voluptates.</div>
<div>Distinctio, alias magnam, dolor ut rem dicta ab neque labore aspernatur atque, perspiciatis quas odit debitis quisquam voluptatem! Aspernatur distinctio possimus ratione nisi necessitatibus quibusdam dignissimos, aliquam illo quaerat inventore.</div>
<div>Eum unde ut dolores aperiam nulla ipsam quam voluptatum, voluptate consequuntur deleniti corrupti quaerat explicabo recusandae repudiandae enim laudantium sed, incidunt reiciendis soluta, nemo voluptatibus. Cupiditate, veritatis temporibus! Obcaecati, veniam.</div>
<div>Aliquid maiores, corrupti labore sunt numquam vero ea at commodi. Id facere blanditiis beatae, debitis maiores deserunt excepturi, reprehenderit dolores animi fugiat aperiam magni, odio nisi numquam, cum repellat eaque.</div>
<div>Asperiores sint ad quasi commodi quod. Possimus accusantium et labore, autem error aut illum sed voluptatibus non necessitatibus, quisquam fuga voluptates debitis eos aperiam. Deleniti, at alias sequi quos impedit.</div>
<div>Possimus ducimus cum consectetur minus sint doloremque, nam quisquam temporibus nisi optio magni sapiente adipisci excepturi laudantium quo nemo iste aliquid beatae quidem impedit accusamus reiciendis inventore quasi. Debitis, doloribus.</div>
<div>Et vitae tempore ea impedit. Ipsam vero a vel mollitia impedit, minima, aliquid ex voluptatibus harum numquam, eveniet qui iusto. Veniam sed temporibus ipsum in quis ut. Cumque doloremque, perspiciatis!</div>
<div>Quis dolorem, repellendus accusantium in incidunt magni error illum omnis quia aut doloremque sunt possimus commodi impedit quos ipsam tempora tenetur quae porro itaque vitae! Voluptatibus, molestias, porro! Voluptates, ab.</div>
<div>Doloremque necessitatibus, possimus sed minus delectus repellendus sunt natus earum omnis optio, magnam aspernatur illo inventore? Facere vero quibusdam, tempora sint reiciendis laudantium repellat aliquam vel dolores ducimus aut nihil.</div>
<div>Incidunt pariatur quos tempore tenetur saepe culpa, veritatis quas sit officia rerum excepturi fugiat harum odio consectetur autem! Unde neque tempore reiciendis, necessitatibus quibusdam perferendis voluptas. Distinctio modi, nostrum omnis!</div>
<div>Amet quod voluptatum nisi assumenda quo saepe, aperiam, molestiae ea sit nihil eos inventore corporis, mollitia vero libero. Accusantium aliquid quae aspernatur illo necessitatibus iure, repellendus asperiores perferendis possimus ratione!</div>
<div>Qui nihil nesciunt error deserunt non ipsa natus ad, nulla obcaecati nobis voluptatem aspernatur voluptates omnis officiis quisquam dolorum neque eligendi velit molestias illum repellat. Nostrum cupiditate temporibus mollitia odit.</div>
<div>Voluptatibus porro placeat, repellat esse tempora. Rem magni, consequuntur optio dolorum quo non natus labore accusantium necessitatibus, molestias aut hic id, similique blanditiis exercitationem suscipit placeat adipisci aliquam tenetur ab!</div>
<div>Inventore at vel quasi ipsa similique, dolore quos corporis ipsum quis ullam, nulla magni tempore delectus ad optio quae architecto neque tempora. Sunt nam explicabo autem optio harum obcaecati quae.</div>
<div>Earum ex nihil non iste! Eos, qui voluptate voluptates, impedit officia aliquam aut repellat quae nostrum esse laborum nam laboriosam eveniet temporibus odio animi vero velit vel delectus. Reiciendis, error.</div>
<div>Accusamus voluptates sed, laborum qui natus dolore provident est omnis soluta quibusdam quam eligendi, ipsam eaque optio unde sint illum nihil sunt consectetur alias aliquam cumque velit, magni! Ipsam, doloremque.</div>
<div>Ipsum itaque possimus, veniam eaque dolorem, expedita cupiditate accusamus explicabo deleniti odit, incidunt quibusdam amet in omnis! Cumque culpa dicta ex at aliquam cum temporibus, nam, incidunt, porro sequi debitis.</div>
<div>Maxime officia ullam blanditiis, earum tenetur nobis, mollitia vel illum perspiciatis dolore laudantium minima quis quidem rerum totam quo libero. Eligendi fugiat inventore provident. Dicta exercitationem nihil quia, blanditiis distinctio?</div>
<div>Veniam, optio laborum harum dolor explicabo quisquam tempora quidem deserunt rerum aspernatur, dolorum sapiente velit. Vitae temporibus minus voluptatum nobis dicta inventore quibusdam, ullam aspernatur amet libero, placeat iusto natus.</div>
<div>Minima eaque quos est ea exercitationem, saepe cumque ratione unde quis sunt minus repellat provident? Perferendis illo omnis officiis excepturi commodi inventore optio magni illum quibusdam, odio libero quas suscipit.</div>
<div>Quisquam nobis, magnam, ratione necessitatibus ad obcaecati soluta cupiditate ipsam. Earum numquam modi perspiciatis quas rerum quo reiciendis illum possimus laborum dicta, suscipit culpa nobis dolore, ipsa illo accusantium at!</div>
<div>Quas quos labore excepturi distinctio voluptates, eos omnis ad exercitationem enim quaerat, voluptate illo error aliquam neque ipsum itaque. Ipsam sint voluptas fuga excepturi omnis inventore, quod odit et. Dicta!</div>
<div>In ipsum excepturi minus minima magni reprehenderit vel. Numquam temporibus obcaecati sunt officia nesciunt minus ea cum inventore! Et repellendus molestiae iste omnis necessitatibus, porro in maiores ab incidunt accusantium!</div>
<div>Officia veniam et, esse. Earum magni, ducimus voluptatum fuga explicabo eius saepe ab sed architecto voluptate dolores similique natus minima sint, dolorum suscipit rerum maxime tempora, ullam animi voluptas dolore.</div>
<div>Sint laudantium veniam omnis sed et maiores perspiciatis porro ducimus corporis blanditiis perferendis nostrum quae hic nobis libero qui similique eius beatae laboriosam eveniet maxime natus, dolore explicabo laborum! Officia!</div></main>
<footer id="bottom">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ea necessitatibus ab, modi possimus inventore iusto aut provident quisquam exercitationem ducimus optio at, rem porro rerum doloremque corporis fuga dolorem.</div>
<div>Est amet, eius nam dolores dolore, molestiae fugit quisquam doloribus, alias accusamus impedit quas distinctio tenetur. Quisquam modi perspiciatis earum esse quasi sunt id, fugiat quas et aperiam nesciunt fugit.</div>
<div>Consequatur modi iste, sequi cumque repudiandae nihil eveniet quod perferendis aliquid amet molestiae, nulla nesciunt officia repellat quo, sunt ex porro libero beatae provident quidem earum. Enim eum impedit quae!</div>
<div>Corporis quasi tempore asperiores officiis praesentium facilis nesciunt maxime. Vero veniam, quisquam labore voluptates, fuga culpa perspiciatis magni eum atque, quia, maxime amet corporis necessitatibus non saepe! Animi, consequuntur, quasi.</div>
<div>Repudiandae repellendus dolores error aspernatur magni hic non labore quas quaerat. Ipsum, aliquid ullam blanditiis optio totam mollitia nesciunt dolorem tempore nisi facilis deserunt fuga molestias eaque voluptas provident cumque!</div>
<div>Repudiandae excepturi, iure rerum error quia a, iste repellendus repellat magni quo accusamus aperiam labore sint, fugit odio quis expedita, enim pariatur dignissimos doloribus! Adipisci voluptatibus omnis nulla est ducimus!</div>
<div>Soluta excepturi facere error illum earum nobis, a nulla quidem minus sunt eum molestias reiciendis odio voluptatem mollitia, accusantium maxime iusto facilis tempore voluptas molestiae ratione debitis! Quisquam, obcaecati quas!</div>
<div>Recusandae voluptatem ipsam odio excepturi, beatae dolores sapiente ex, dignissimos cupiditate molestiae enim sed vitae laborum facilis deleniti fuga alias. Officiis impedit suscipit, cupiditate iusto quibusdam quasi voluptates amet unde.</div>
<div>Deserunt similique fugit porro? Ipsa facilis doloribus, odit alias dolores quas rem a voluptatibus similique veniam accusamus mollitia velit accusantium asperiores. Optio animi, quo enim eaque soluta dolor totam recusandae.</div>
<div>Neque laborum nesciunt perspiciatis vero fugit quo quas saepe sint quisquam modi veritatis repellendus autem tempora voluptatum accusantium distinctio velit alias, nihil optio facilis at ea consectetur, id dolorem. Neque.</div>
<div>Alias, molestias similique error aperiam excepturi voluptatibus at. A sit iusto maxime consequuntur consequatur adipisci in provident odit! Vel magnam, nulla perspiciatis ab minima cumque dicta ea! Maxime, vitae, eligendi.</div>
<div>Ea ipsum dolores eaque nam architecto possimus perspiciatis nisi perferendis at, sunt reprehenderit rerum ad ullam, fuga nemo tenetur numquam voluptatibus. Excepturi eum quia reprehenderit repellat rem tempore fugiat, alias!</div>
<div>Unde vel eaque ex quasi accusantium. Quis illum odit vel sapiente numquam repellat recusandae eius, maxime perspiciatis dolor quisquam ducimus ullam sint, voluptatem dolorem nesciunt quidem cum. Nobis, cumque, perferendis!</div>
<div>Sed nihil soluta, fugiat itaque a! Obcaecati, quasi, odio! Architecto minima beatae expedita eos sit numquam non, repellat dolor, ipsam? Qui repudiandae voluptates quas quidem laudantium molestias. Nobis, voluptates voluptas.</div>
<div>Repellendus, delectus expedita ratione, sit facere eum quam itaque modi libero, accusamus ex ab ipsa saepe nihil incidunt perspiciatis sed labore explicabo impedit aut dolorem nulla consequuntur dolor quod! Necessitatibus!</div>
<div>Corrupti adipisci, repellat sunt nulla excepturi ea velit, quo voluptas laudantium alias et ipsum perferendis rem repudiandae temporibus, reiciendis saepe? Maiores delectus voluptate sequi, corrupti vitae voluptatibus esse dolorum hic.</div>
<div>Quae ratione voluptate sit architecto veniam cumque blanditiis tempora, debitis, odio nihil inventore magnam fuga sapiente at officiis, officia necessitatibus. Non omnis, fugit eaque quasi blanditiis vel accusantium. Minima, totam.</div>
<div>Quaerat nihil tempora autem possimus? Temporibus earum accusamus, aperiam. Velit rerum sint nulla minima deserunt harum quae cupiditate, dolorum mollitia, magni voluptas quibusdam possimus pariatur adipisci odio accusamus quasi minus.</div>
<div>Explicabo asperiores dignissimos quaerat numquam illo error, culpa mollitia, natus, incidunt quod earum dicta itaque ut soluta veritatis molestias ipsam magnam rerum consequatur. In natus reiciendis, dolor quasi accusantium tempore!</div>
<div>Magni incidunt at harum ullam molestias nulla voluptatum animi eius reprehenderit ad in sunt velit assumenda eum voluptatibus iusto vel maxime delectus, sed minus nemo ab. Perferendis aspernatur, omnis aliquid?</div>
</footer>