how to make a Pure CSS Scroll to top-CodePudding

How to make a Pure CSS Scroll to top I tried doing it but I didn't know how to make it on click like in JavaScript I tried doing it and this is my CSS Code

`body {
  height: 99999999999999999999999999999999999px;
  position: relative;
}

button {
  color: white;
  width: 30px;
  text-decoration: none;
  height: 30px;
  text-align: center;
  position: fixed;
  left: 95%;
  top: 92%;
  cursor: pointer;
  line-height: 20px;
  background-color: red;
}`
html code `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="study2.css" />
  </head>
<body>
  <span ><button >Up</button></span>
<div>One</div>
</body>
</html>`

CodePudding user response：

set this in the css:

html {
  scroll-behavior: smooth;
}

and create a:href for scrolling:

<a href="#top">to top</a>

the last step, put this after <body> opening tag:

<div id="top"></div>

example :

html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}

<h1>Smooth Scroll</h1>

<div  id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div  id="section2">
  <h2>Section 2</h2>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

Resource
How TO - Smooth Scroll

CodePudding user response：

Scroll top with these to codes:

html{
  scroll-behavior: smooth;
}

<button>
  <a href="#">To top</a>
</button>

CodePudding user response：

You can use html!

Define an id in the body tag. ex:

<body id="exampleId">

Put an a tag on your page. and enter the href parameter using # the id you entered in the body tag. ex:

<a href="#exampleId">Click Me And Go To The Top !</a>

You can design the optional a tag like a button!