비전공자 개발일기

Scroll To Top 본문

HTML _CSS

Scroll To Top

HiroDaegu 2022. 8. 6. 00:29
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<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>SCROLL TO TOP</title>
  <link rel="stylesheet" href="style.css">
</head>
<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>
</html>
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;
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

404 Error Page  (0) 2022.08.09
3D Animation Effect  (0) 2022.08.08
Text Animation  (0) 2022.08.05
Sidebar Menu  (0) 2022.08.04
Firework  (0) 2022.08.01
'HTML _CSS' Related Articles more