"CSS-only back to top button"
Bootstrap 4.1.1 Snippet by tieusuquay79

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div> <!-- your content goes here --> <h1>Main Title</h1> <p> Bear claw gummi bears danish ice cream halvah cotton candy pastry chocolate bar. Croissant cotton candy cotton candy jelly beans shortbread cheesecake sugar plum. Marshmallow brownie liquorice jelly carrot cake bonbon jelly-o ice cream. Sweet roll cupcake tootsie roll candy sugar plum gingerbread pastry. Halvah carrot cake lemon drops cake marshmallow gingerbread pie sesame snaps. Cheesecake lemon drops muffin sweet wafer chupa chups. Pudding gummi bears cupcake powder chocolate bar cupcake. Sesame snaps macaroon candy jelly ice cream sweet muffin wafer carrot cake. </p> <h2 >Secondary title</h2> <p>Croissant tiramisu candy canes danish dragée lemon drops. Tart dessert dragée fruitcake bear claw danish gingerbread. Croissant gingerbread chocolate cake apple pie sweet roll cotton candy. Jelly jelly icing toffee cotton candy. Soufflé tart sweet roll chocolate sesame snaps fruitcake carrot cake. Wafer biscuit cotton candy sweet icing. Sesame snaps sesame snaps gummi bears topping macaroon liquorice. Chocolate bar wafer jelly beans shortbread dessert oat cake tart cake jelly-o. Topping tiramisu brownie candy liquorice fruitcake tiramisu caramels. Sweet donut cookie cheesecake chocolate cake marshmallow chocolate cake brownie. Gummi bears sugar plum sugar plum chocolate bar dragée pie gummies. Sweet candy canes icing macaroon cookie pie jujubes sugar plum. Cake fruitcake pastry muffin sweet roll bear claw. Topping pudding bonbon pudding cookie marshmallow. </p> <h2 >Secondary title</h2> <p>Croissant tiramisu candy canes danish dragée lemon drops. Tart dessert dragée fruitcake bear claw danish gingerbread. Croissant gingerbread chocolate cake apple pie sweet roll cotton candy. Jelly jelly icing toffee cotton candy. Soufflé tart sweet roll chocolate sesame snaps fruitcake carrot cake. Wafer biscuit cotton candy sweet icing. Sesame snaps sesame snaps gummi bears topping macaroon liquorice. Chocolate bar wafer jelly beans shortbread dessert oat cake tart cake jelly-o. Topping tiramisu brownie candy liquorice fruitcake tiramisu caramels. Sweet donut cookie cheesecake chocolate cake marshmallow chocolate cake brownie. Gummi bears sugar plum sugar plum chocolate bar dragée pie gummies. Sweet candy canes icing macaroon cookie pie jujubes sugar plum. Cake fruitcake pastry muffin sweet roll bear claw. Topping pudding bonbon pudding cookie marshmallow. </p> </div> <a href="#" class="top">Back to Top</a> </body>
body { display: grid; grid-template-columns: 1fr 0px; font-family: system-ui, sans-serif; background: #eee; } .top { --offset: 100px; /* control when the button appear */ position: sticky; bottom: 20px; margin-right: 10px; place-self: end; margin-top: calc(100vh + var(--offset)); width: 60px; aspect-ratio: 1; background: #ff8b24; border-radius: 10px; font-size: 0; } .top:before { content: ""; position: absolute; inset: 30%; transform: translateY(20%) rotate(-45deg); border-top: 5px solid #fff; border-right: 5px solid #fff; } h1 { font-size: 3rem; } p { font-size: 1.5rem; text-align:justify; } body > div { margin-inline: max(3px,50% - 800px/2); } /* remove the below if you don't want smooth scrolling */ html, body { scroll-behavior: smooth; }

Questions / Comments: