纯css实现右下角按钮点击滚动返回页面顶部效果代码-html代码-BFW代码库

纯css实现右下角按钮点击滚动返回页面顶部效果代码

代码语言：html

代码描述：纯css实现右下角按钮点击滚动返回页面顶部效果代码，无js代码，纯css代码实现这个效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
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;
}
</style>



</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 desse.........完整代码请登录后点击上方下载按钮下载查看