cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Effet ScrollToTop</h1>
<button class="scrollToTop">Haut</button>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate natus, illum aliquam deserunt laborum maiores quo velit, impedit. Id, repellendus. Pariatur accusantium suscipit labore nisi voluptates maiores dolores enim et?</div>
<div>Ex vel optio quidem provident blanditiis voluptatem cupiditate magni, officia, labore animi rem asperiores ipsam aperiam tenetur. Reprehenderit harum fugit laboriosam accusantium, sequi, nemo assumenda at dicta beatae nam, magnam!</div>
<div>Dignissimos excepturi officia iste, voluptas, doloribus quia praesentium odio harum blanditiis quo suscipit ratione voluptate quas numquam consequuntur molestiae, vel nostrum. Ab ipsum quas nobis beatae doloremque aliquam qui ducimus.</div>
<div>Minima consequatur adipisci aperiam modi, omnis facere, voluptatum perferendis numquam, quo dolorum fuga commodi nam nesciunt sed soluta. Illo qui, nihil a amet nisi aperiam voluptates. Quisquam corrupti ullam consectetur!</div>
<div>Beatae eveniet iusto repellendus, inventore voluptatem rem magni numquam nulla quaerat veniam tempora possimus harum. Quam minus libero blanditiis non rem dolorum nemo, facere quis officia culpa et! Delectus, excepturi!</div>
<div>Modi quae unde nihil aspernatur adipisci voluptate ipsam voluptatum maiores, placeat atque, explicabo, suscipit. Sequi velit quae, qui magni assumenda numquam excepturi, necessitatibus quos repellendus praesentium porro consequuntur amet laudantium.</div>
<div>Officia ab iure molestiae quae, amet accusantium laudantium ullam repellendus rem nisi esse voluptate ducimus suscipit hic magni, blanditiis nesciunt repudiandae quibusdam veniam? Veritatis vel quos quisquam. Labore nobis, doloremque!</div>
<div>Aliquid aliquam perferendis commodi voluptas eaque eum nulla quas, eligendi tempora. Molestias tempore deleniti modi reiciendis, dolore vero. Illum pariatur qui provident laborum. Expedita ipsam perferendis excepturi, obcaecati itaque blanditiis?</div>
<div>Delectus provident cum culpa non perspiciatis reprehenderit ipsum quam odit nisi porro praesentium minus dicta, iure fuga, corporis suscipit facilis a, voluptatibus commodi et ea eaque. Voluptas adipisci esse, nihil.</div>
<div>Quibusdam debitis modi delectus iste asperiores nesciunt quod corporis numquam rem. Est, aut autem nulla. Aperiam et sunt at itaque excepturi voluptas asperiores neque quidem aliquid. Deleniti dicta assumenda, ab?</div>
<div>Aliquam molestias suscipit, excepturi tempora exercitationem molestiae inventore, quae reprehenderit odit nostrum dicta consequatur officiis, quos, provident blanditiis fugiat aut dolores facere! Distinctio fuga perspiciatis error similique quae doloribus velit.</div>
<div>Repellat eligendi veritatis perferendis dolores quisquam. Consequuntur cum doloremque odio aliquid pariatur deleniti quia quidem dolorem quibusdam, deserunt quis, eos iusto impedit dolore libero repellat, nostrum consectetur delectus fugit alias.</div>
<div>Quisquam architecto voluptatum laboriosam rerum sit ea quos, aut vel, voluptatibus eius omnis vero quam iste enim quod labore expedita? Hic earum aliquid tempore quo quis soluta unde ea dolorem.</div>
<div>Aspernatur recusandae quidem facere animi quia? Fugit porro at dolore ipsam eligendi in corporis? Quos, quaerat. Eos ducimus alias quos, necessitatibus ab itaque, facilis dolore deleniti quisquam amet magni repellendus!</div>
<div>Ut assumenda officia perspiciatis nihil! Est quidem recusandae dolorum saepe soluta. Vel excepturi voluptatum quisquam in, asperiores aliquam velit, optio at, provident recusandae impedit incidunt tempora labore aut animi maxime.</div>
<div>Fugiat illum doloremque dolore fuga eveniet quisquam corrupti dolor dicta voluptatem modi quam sapiente a, veritatis cupiditate nostrum, voluptate labore maiores maxime amet omnis ea quod obcaecati quibusdam! Illum, cumque.</div>
<div>Ratione aliquam modi itaque totam aperiam delectus minima placeat facilis, vero? Cupiditate explicabo corrupti consequuntur ad dolorem, sunt odio laudantium ducimus officia? Dolorum autem provident corporis quisquam recusandae voluptas consectetur.</div>
<div>Minima hic minus porro adipisci qui ex delectus sit obcaecati rerum excepturi molestias sint vitae ipsum et iure blanditiis repudiandae recusandae voluptatibus tempore maxime rem, sequi quisquam. Quae commodi, repellendus.</div>
<div>Fugit, voluptatem, dicta pariatur adipisci ad officia vitae repellendus delectus quibusdam molestiae nostrum placeat hic quaerat asperiores inventore cupiditate ab aperiam quasi commodi suscipit quis praesentium debitis sapiente. Odio, amet.</div>
<div>Quaerat eum harum debitis libero eligendi quasi, rem, asperiores delectus officiis incidunt maiores accusamus qui aliquid repudiandae, architecto commodi quod dolores ipsa, impedit excepturi consequatur temporibus tenetur fugiat tempore! Aperiam.</div>
<div>Recusandae debitis quis amet, nihil error adipisci quos nesciunt voluptatum perspiciatis temporibus, velit! Ea, incidunt libero? Et eius officiis doloremque ut voluptatibus voluptatum quam, possimus commodi, aut non animi quis!</div>
<div>Temporibus ea dignissimos, quisquam quasi, sint voluptatem in veritatis velit et ducimus laudantium doloremque recusandae magnam hic ex accusantium, voluptatibus facere optio consequatur excepturi saepe ad sunt alias nemo. Quae!</div>
<div>Consectetur asperiores quae sapiente nemo tempore, voluptate facere suscipit architecto reprehenderit sunt quam, a officia animi molestiae voluptas nam corporis, accusamus neque laborum possimus. Commodi accusantium consequuntur eius, obcaecati possimus!</div>
<div>Doloremque est eaque quis quidem cupiditate dolore optio neque mollitia omnis dolorum illum nesciunt sunt quisquam esse, vitae ipsum. Nesciunt error magni debitis dolorem soluta doloremque nostrum alias quo, eligendi.</div>
<div>Facilis odit laboriosam quia! Itaque laboriosam eligendi debitis aspernatur. Eum quasi nisi dolorem. Earum voluptatem veritatis, doloribus atque repudiandae ad dignissimos excepturi repellat expedita odit saepe, error corporis, quia mollitia!</div>
<div>Impedit dolores atque aliquam voluptatem nisi laudantium vel delectus iste, fugiat? Ullam fugit expedita autem nisi ad odit, fuga rem similique obcaecati reiciendis quia, mollitia sed delectus, sunt nihil! Ducimus!</div>
<div>Aspernatur ut doloremque aut iste necessitatibus excepturi nobis, maxime reiciendis laboriosam. Laudantium quae, ea saepe id facere eaque, sapiente nesciunt ipsam nisi veniam! Quidem libero, voluptas temporibus neque nemo facere.</div>
<div>Consequatur, tenetur ipsa quibusdam adipisci odit minus ducimus aliquam est autem dolor qui fugit, facere saepe. Id porro, commodi, quam recusandae corrupti fugit error unde vitae necessitatibus, cumque eum quas.</div>
<div>Natus aliquam impedit sunt inventore maxime libero consequatur quisquam sint. Beatae quae sint nobis non tempore error eius consectetur consequatur, mollitia, perspiciatis, maxime. Fugit eum officiis libero eaque minus ipsam.</div>
<div>Nulla cumque sunt autem quod, mollitia unde aliquam laboriosam vitae nostrum dolorem, fugiat reprehenderit excepturi facere quo soluta a iure magni ad, harum veniam, doloremque dolor est consequatur? Veniam, officiis.</div>
<div>Maxime repudiandae pariatur placeat earum eum minus eos sed consequuntur! Earum neque placeat sint dignissimos, ducimus ipsa blanditiis dolore illum, obcaecati debitis. Quos fugit veniam, iste molestiae nisi vero ipsam?</div>
<div>Nemo at illo a, asperiores error optio tempora earum dolor dolorem magnam vitae officia neque quod facilis odio, nobis, quibusdam quo? Facilis expedita doloribus quidem, earum repudiandae! Nemo, amet, vero!</div>
<div>Aperiam aliquam incidunt odio quasi id numquam molestias sit eius quo dolore, omnis vitae rerum dignissimos repellat deleniti fugit? Nostrum nobis dignissimos ipsam ut quidem quisquam aliquam rerum aliquid sapiente.</div>
<div>Dolore velit officiis, deserunt, numquam, a non ducimus eaque nemo quia consequatur neque, nesciunt consequuntur dignissimos magnam pariatur qui eligendi iure id facilis blanditiis! Dolor, aliquid, minus. Praesentium, quod, facilis.</div>
<div>Soluta, ipsum, alias. Eum nisi iste libero ipsum incidunt modi debitis, expedita, labore dolorem velit dignissimos amet temporibus tempore, asperiores consequuntur voluptatem tenetur ullam? Accusantium quaerat hic, excepturi tempora nisi!</div>
<div>Minima, earum, dicta! Architecto veritatis beatae molestiae minima consequatur iusto, blanditiis dolore. Doloremque corporis consectetur aliquid possimus consequatur tempora veniam repellendus hic consequuntur voluptates, rerum? Ut voluptatem corporis perspiciatis amet?</div>
<div>Ipsum, officiis autem ad voluptatem sapiente itaque saepe nesciunt architecto vitae ut accusantium ex dicta similique minus. Aliquam, aut dignissimos veniam accusamus porro odit blanditiis a quam amet in placeat.</div>
<div>Dolores sed, architecto blanditiis delectus veritatis sequi. Magni molestiae cupiditate commodi, rerum minus, debitis a cum voluptatum dolores veniam corrupti dolorum modi, consequatur qui esse hic optio molestias incidunt placeat?</div>
<div>Sequi tempore animi iusto repudiandae, quos, maxime, magnam beatae accusantium, rem totam ad recusandae fugit placeat perferendis consectetur nesciunt! Placeat ut officiis suscipit praesentium doloribus. Tenetur minus quos consequatur, vero?</div>
<div>Explicabo soluta vero ut similique dolore quaerat distinctio tempore odio earum, suscipit accusamus sit quisquam aliquid illo quas delectus at ab ad eum nisi quibusdam enim natus quod eveniet. Dolorem.</div>
<div>Vel et fugiat deleniti voluptate ipsam enim est dolorum neque delectus pariatur distinctio error sequi reprehenderit autem quae nihil consectetur consequuntur illum, officiis porro, nulla iste! Laboriosam, quia veritatis iusto.</div>
<div>Ad sunt dolorum dolorem tempore possimus dicta nihil distinctio natus impedit placeat assumenda quam atque doloremque sequi accusantium vitae eaque maiores, voluptatum nesciunt veniam unde recusandae, eum tempora alias minus!</div>
<div>Quidem adipisci officia illo, rerum iure aut velit, tempora sed similique, laudantium consectetur id numquam quibusdam esse dicta accusamus. Ducimus maiores dicta velit ab minima magnam, officiis vero similique consectetur!</div>
<div>Aliquam in quas, odit aspernatur dignissimos sit repellendus reiciendis, doloremque consequatur dolore aperiam repellat quisquam voluptatem est praesentium. Molestiae suscipit reprehenderit fugiat eveniet asperiores, quo nemo nobis! Dolor, odio, consequatur!</div>
<div>Eaque deleniti quasi esse veritatis cupiditate reprehenderit inventore corporis, maiores, eveniet numquam laborum modi fuga aut perspiciatis. Quam aperiam enim, rerum fuga id magni autem nesciunt, ipsum provident, sunt laborum.</div>
<div>Quas vitae magnam esse impedit labore fugit et ipsa explicabo quibusdam molestias ea non debitis autem quod pariatur fugiat rerum dolorem officiis laudantium, perferendis eligendi assumenda. Totam atque, possimus et?</div>
<div>Dolorum, officiis. Debitis cupiditate fugiat, totam animi ipsa quae earum necessitatibus, asperiores, natus facilis officiis nam voluptatem vitae commodi iste quia beatae officia? Eaque accusantium voluptatibus nostrum odio maxime quis.</div>
<div>Consectetur itaque animi autem libero necessitatibus blanditiis nobis, cumque beatae maiores ducimus? Quod qui eaque blanditiis voluptatem. Ducimus molestiae, quaerat harum quis possimus ex sapiente dolor odio vero numquam tempora.</div>
<div>Quasi sunt libero inventore tempore natus delectus quia voluptatem quibusdam dolores iure, optio aperiam fuga ducimus quo ratione officiis odio harum tempora doloribus nulla veritatis incidunt? Nisi qui minus tempora.</div>
<div>Dolorum amet maxime at alias quod officiis obcaecati quidem, adipisci laborum optio assumenda fuga eum illo, inventore asperiores nam cupiditate non hic quo. Omnis, officia at cumque sapiente quae obcaecati!</div>
<div>Ex vitae quis temporibus quas laborum labore neque aperiam incidunt dolorum pariatur quos consectetur autem id voluptas, odio sequi! Error quibusdam dolores eligendi vel nisi, doloremque alias. Dolor, error, repellendus.</div>
<div>Facilis fugiat eum sit repellat, deleniti dolore, iure autem cumque non a officia mollitia consectetur quos nobis nihil consequatur eveniet voluptatum ratione commodi. Tempore esse doloremque eveniet officia, incidunt perferendis.</div>
<div>Cum et molestias dicta. Expedita autem eligendi rem eos cum natus, nesciunt. Dolorum, neque quam eum sint, id dolor tenetur mollitia reiciendis impedit placeat! Perferendis autem aperiam molestias placeat est.</div>
<div>Reprehenderit dolores mollitia assumenda nesciunt laudantium eaque expedita inventore, voluptas amet nisi consequuntur aperiam ipsam quae delectus! Numquam expedita repellendus non rerum harum aut iusto ipsum culpa, quidem ad nostrum.</div>
<div>Ex molestiae eos veritatis ea, praesentium numquam amet soluta laudantium dolor, odit corrupti modi cupiditate. Culpa fugiat amet veniam iure reiciendis modi, corporis est labore quis illo exercitationem ullam dicta.</div>
<div>Veniam recusandae at reprehenderit perspiciatis quidem aspernatur eaque omnis consectetur, itaque blanditiis. Cupiditate saepe dolor reprehenderit tempora, aspernatur necessitatibus aut soluta reiciendis consectetur, minus itaque harum atque expedita ipsam nemo?</div>
<div>Reprehenderit, enim molestiae quod odit fugiat adipisci laudantium quo, laboriosam voluptate non nesciunt doloremque, itaque aliquid unde assumenda est nostrum ratione necessitatibus repellendus numquam eos obcaecati commodi recusandae. Similique, neque.</div>
<div>Officiis repellat ea perspiciatis nihil, voluptate fuga quibusdam natus quam, quisquam eaque aliquam qui facilis esse, cum aspernatur quaerat. Perspiciatis doloribus earum obcaecati veritatis corporis, assumenda in reprehenderit facere laborum!</div>
<div>Perferendis earum, blanditiis, sapiente voluptas minima omnis? Aspernatur quisquam facilis deleniti est totam? Exercitationem totam aperiam dolorem eum eos alias ab animi distinctio, dolor. Debitis dolorem animi error, sapiente modi.</div>
<div>Nulla itaque hic culpa accusamus, incidunt doloribus nostrum quae, atque, minus molestias laboriosam esse fugit error voluptatem veniam quia sunt quaerat veritatis eius in dolores ut quo ad animi. Modi!</div>
<div>Eligendi, minima vitae in. Maiores sunt eligendi rerum ipsa voluptas! Deleniti modi voluptatibus ut saepe sit facere, labore repudiandae cumque eaque cum voluptates deserunt dolorem ullam corporis magnam atque maiores?</div>
<div>Fugiat doloremque, consequuntur earum accusamus, animi officiis repellendus veniam ullam magni, repellat odio aperiam cumque deleniti consequatur necessitatibus explicabo illum cum quisquam commodi beatae consectetur officia dolore! Et, recusandae, ipsa.</div>
<div>Quidem dignissimos quia assumenda quos natus, nobis necessitatibus delectus quas esse alias officiis voluptatum veritatis odit qui nam suscipit inventore. Atque explicabo eos cum eligendi fugit nulla id natus quis!</div>
<div>Veniam quis dicta magni vitae illo debitis consequuntur eum tempora. Voluptatibus explicabo quo quibusdam eaque veniam delectus, alias maxime, soluta officia a, nesciunt id corporis quod error eligendi perspiciatis blanditiis!</div>
<div>Possimus nostrum, sapiente doloribus corrupti. Quisquam cumque, non aliquid earum! Aut excepturi ipsa molestiae asperiores, iusto a doloremque obcaecati odio, magni rem officia quibusdam laborum distinctio consequuntur! Hic qui, sit.</div>
<div>Deserunt at dignissimos voluptates ullam commodi temporibus, amet delectus! Fuga atque, reprehenderit ea delectus sit deserunt repellat. Tenetur accusamus deserunt quam, ratione, ad, fuga perspiciatis repellat odit deleniti beatae mollitia!</div>
<div>Rem neque, nostrum consequatur deserunt est dignissimos aperiam hic omnis. Dicta maiores temporibus doloremque velit ullam architecto totam veritatis blanditiis quaerat recusandae voluptates quis possimus, ipsum, consectetur odio debitis hic.</div>
<div>Dolorum aperiam unde totam excepturi amet error veniam harum fuga quibusdam, adipisci similique modi eius eum officia quisquam omnis alias vitae sint! Ducimus quasi, quas ipsam eos, necessitatibus aspernatur nihil.</div>
<div>Qui animi exercitationem inventore culpa consectetur? Aspernatur autem harum reiciendis tempora excepturi quasi facere qui, omnis. Officia ullam quis quasi iure a ipsam ab earum odio dolorem, atque! Dolorum, ullam.</div>
<div>Laborum perferendis atque labore, non delectus, architecto earum. Officiis laudantium quis ex soluta maxime repellendus fuga nemo sit? Est saepe dolorum quidem nemo nihil corrupti nobis quam incidunt, minima modi!</div>
<div>Dignissimos nulla quos saepe quas sed, cumque esse numquam sapiente. Ipsa eum quibusdam, ipsam aut alias illo soluta, laboriosam dolores consequuntur itaque porro quae officia error ratione sequi quos expedita.</div>
<div>Aliquam necessitatibus distinctio labore porro explicabo tempora, quasi nemo veritatis? Minima adipisci sunt nobis nihil dolorum! Dicta at, consequatur expedita tenetur qui quos sunt eaque, ad atque, culpa quis tempora!</div>
<div>Quos fugiat fugit provident doloribus, ipsum tempore sit, quod alias rem consectetur ab incidunt nulla vitae consequatur culpa voluptatibus, pariatur excepturi. Distinctio ipsum iusto ut earum sapiente adipisci laudantium nisi.</div>
<div>Provident dignissimos impedit illo porro necessitatibus iste, fugit modi quo eveniet error accusamus, minima nobis voluptatum pariatur in, quasi! Nihil mollitia adipisci corrupti tempore modi sed quae maiores eos dolores.</div>
<div>Nam illum ex accusantium architecto rerum placeat, impedit sit velit ipsa dicta alias voluptas sint nihil ut molestiae minima minus, vero ipsum, quos repellendus maiores quasi nostrum odio. Est, consequuntur!</div>
<div>Laboriosam ipsa accusamus doloremque soluta accusantium, expedita ut dicta alias quo. Odio iste, repellendus, vel eum deserunt quisquam ratione, est culpa itaque unde nisi rerum blanditiis corporis deleniti, laudantium veritatis.</div>
<div>Incidunt libero voluptatem quis eos ex autem ab assumenda quam deleniti, iusto quia cum praesentium fugit nihil numquam nesciunt veniam quae. Facilis tempore, dolorem vero distinctio vel optio consequuntur magni.</div>
<div>Minus quisquam dolore magni ducimus fuga error sed quibusdam. Recusandae odio, excepturi vitae corrupti debitis dolores, odit corporis porro ut qui asperiores sapiente architecto maiores suscipit, ab libero veritatis laudantium.</div>
<div>Nam, eveniet dolorum ratione aliquid fugiat, ipsum unde doloribus culpa ab! Sint nemo laudantium eos deserunt eum sunt vel iusto, consequatur assumenda beatae veniam, voluptatum, excepturi fugit. Dolores, veritatis explicabo!</div>
<div>Accusantium quos consequuntur, magnam, quaerat sed, totam voluptatibus at beatae nostrum perspiciatis ab doloribus ad tenetur quas, iure unde. Mollitia voluptatibus sit, expedita aliquam. Praesentium dolore commodi eveniet consequuntur fuga.</div>
<div>Voluptatem nesciunt iusto veritatis, nam porro aut alias esse, provident omnis dolor hic, necessitatibus minus nihil maiores eaque perferendis voluptatibus? Cumque ducimus ea ut eligendi natus laboriosam soluta, pariatur aliquid?</div>
<div>Earum, id adipisci ipsum quasi nostrum sequi tempora ex sapiente perferendis minus ipsam tenetur alias saepe sed delectus officia repellat voluptatem in eum neque voluptate quae natus quam aliquam. Totam.</div>
<div>Nesciunt ut praesentium voluptas, aspernatur repudiandae minus in tempore quaerat provident magnam, dicta blanditiis non totam beatae reiciendis ullam sint? Ea aperiam tempora sapiente, harum at culpa soluta numquam pariatur!</div>
<div>Officia odio consectetur qui suscipit, ea commodi doloremque quisquam corrupti. Odit quod temporibus quibusdam consectetur omnis dolore, vero, similique libero repellendus debitis labore commodi asperiores. Quod doloribus consectetur eius sint.</div>
<div>Porro molestiae nemo provident dolor, quia non labore sit? Voluptate reprehenderit accusamus aperiam pariatur quo nobis obcaecati cumque fugit veniam quos accusantium, quaerat, a enim debitis incidunt commodi, hic explicabo?</div>
<div>Pariatur voluptates dolorum tenetur dolores vitae, odio minima similique quisquam inventore fugit perspiciatis vero aliquid, esse maiores animi, impedit velit ipsum repellat iure ipsa totam necessitatibus rem quasi corporis. Fugiat.</div>
<div>Incidunt delectus officiis quod, qui dicta, voluptates odit. Deleniti dignissimos sunt nihil illo, optio obcaecati quo officiis totam veritatis veniam blanditiis architecto ullam mollitia beatae vero libero. Accusamus, tempore, animi.</div>
<div>Cum, nihil voluptatem dolore pariatur esse neque ducimus cupiditate, expedita ad, possimus cumque reprehenderit, hic sapiente sit quis deserunt soluta! Animi quisquam perferendis voluptatibus, quod ducimus laboriosam illo distinctio, aspernatur.</div>
<div>Natus velit eos voluptatem voluptas at, quis repudiandae tenetur id, incidunt possimus deleniti libero rerum accusantium sit officiis, quidem vero hic consequuntur provident eius ducimus! Cupiditate minus tempore magni consectetur!</div>
<div>Eligendi perspiciatis velit id eaque dicta alias quod repellendus aspernatur voluptates facilis maxime officiis tempore asperiores nemo quos, unde magnam necessitatibus quam sequi voluptas harum. Saepe excepturi minima, voluptatum maiores?</div>
<div>Voluptatibus maxime provident sint totam ut dolore veniam placeat laudantium eius cupiditate expedita commodi rerum in beatae optio possimus aut quam, quaerat nesciunt deserunt animi quasi consectetur molestias. Quaerat, molestiae?</div>
<div>Corporis ullam a sit reprehenderit ipsa ipsam, enim suscipit pariatur accusantium asperiores eveniet rem, eius quia saepe vitae libero voluptatum aliquid, expedita quibusdam? Et provident, cumque quibusdam neque veritatis rerum!</div>
<div>Accusamus rem dolorum facere distinctio alias praesentium quidem hic, commodi at unde blanditiis consequuntur neque velit eligendi, reprehenderit beatae autem expedita. Nam amet quas error adipisci distinctio, magnam similique quibusdam!</div>
<div>Cumque, vero fugit temporibus facere ab, tempore vitae architecto veritatis maxime corporis, laborum consequatur soluta voluptas similique labore. Officia excepturi illo, voluptate neque adipisci. Odio dolorum illum cum exercitationem nemo.</div>
<div>Placeat molestiae dolores, et laboriosam magni neque pariatur consequuntur ab fugit aperiam ex quam asperiores dolorum enim odit, eligendi animi nisi sapiente necessitatibus, unde! Aliquid quibusdam enim alias, qui amet!</div>
<div>Quae qui neque blanditiis ad quasi et, ipsa autem odio ut reprehenderit nesciunt voluptatibus veniam sed, dolorem laborum veritatis magnam ab odit incidunt explicabo ratione exercitationem provident magni delectus vitae.</div>
<div>Reprehenderit magni dolorum sint eos animi sapiente pariatur tempora nobis, ipsam amet perspiciatis deleniti voluptatibus, necessitatibus esse, quidem neque rerum asperiores? Molestias quia et a cumque qui, rerum, aliquam doloremque.</div>
<div>Suscipit recusandae odit asperiores iusto cumque, harum minima dignissimos, alias excepturi esse aspernatur iste voluptates nemo quo a obcaecati porro placeat consequuntur voluptate perferendis nam quia! Iusto asperiores earum cumque.</div>
<div>Adipisci, quis voluptatum. Asperiores, soluta sunt dolor minus. Sint tempora natus quibusdam, enim a consectetur illum sapiente veritatis nisi facilis neque temporibus, est impedit? Consequatur, culpa aperiam eius iste velit.</div>
<div>Sapiente odit, inventore odio corrupti similique recusandae rem numquam labore incidunt sint qui quo natus reiciendis voluptatibus, quaerat. Voluptatem ut dolore reiciendis excepturi doloremque distinctio mollitia beatae earum! Natus, qui.</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
            
          
!
            
              button{
  position: relative;
}
.scrollToTop{
	color: #444;
	text-decoration: none;
	position:fixed;
  z-index: 9999;
	bottom:5%;
  left: 40%;
  background-color: rgba(50,50,50,0.8);
  color: white;
	display:none;
  border: none;
  padding: 5px;
  cursor: pointer;
}
            
          
!
            
              $(document).ready(function(){
	
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 300) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
	
});
            
          
!
999px
Loading ..................

Console