Steps for creating a Pure CSS Scroll-to-Top button

Looking to create a Pure CSS Scroll to top, I attempted it but struggled with making it clickable like in JavaScript. Here is the CSS code I tried:


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 class="scroll"><button >Up</button></span>
  <div>One</div>
</body>
</html>

Answer №1

Utilize the power of HTML!

Start by assigning an id to the body tag. For example:

<body id="uniqueId">

Next, add an anchor tag to your page with the href parameter set to # followed by the id you set for the body tag. For instance:

<a href="#uniqueId">Click Here to Navigate to the Top!</a>

You can stylize the anchor tag to resemble a button if you desire!

Answer №2

Get back to the top of the page using these code snippets:

body{
  scroll-behavior: smooth;
}
<button>
  <a href="#top">Back to Top</a>
</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the class condition using AngularJS ng-class

I am working with an HTML element that contains AngularJS directives: <div class="progress"> <span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ...

Steps for creating a resizable and automatically hiding side menu

I am working on a side menu that can be resized, and I want it to collapse (set to zero width) when it is empty. I have considered implementing one of these features individually, but I'm not sure how to make both work together. Is there a way to ad ...

"The issue of a malfunctioning selected option in a select dropdown within an AngularJS application

I've been experiencing some odd behavior with my Dropdown control in an AngularJS application. The selected="selected" attribute doesn't seem to be working, resulting in blank default selected values. Additionally, I'm having trouble with t ...

Spin a sphere within a semicircle using html and css

I have been working on a project to animate a ball inside a crescent shape using HTML and CSS. You can check out my codepen here. However, I am facing an issue where the ball is currently stuck at the top of the crescent. I would greatly appreciate any as ...

Introducing the World of Wordpress Blogging

How can I create an introduction on my WordPress site similar to the one found at ? I am specifically interested in incorporating the expanding horizon line effect. It seems like it may just be a GIF that plays and then fades into the homepage. Are there ...

Applying CSS styles exclusively to a div element and not its before pseudo-class

So I'm working on an HTML page with a div that looks like this: <div class="get-this"> blah blah </div> I've added a before pseudo-element to the div and now I want to apply a CSS style specifically to the div, not including the pse ...

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

I'm working on a display page for my website. The main text in the center needs to change every 60 seconds. I have over 150 individual lines of text that I want to cycle through on the page. What would be the most efficient way to load all these te ...

Query in MySQL to select distinct rows and non-distinct rows

Looking to run a query on a table where the names are distinct and the emails are not Here is how my database is structured: Name Email john <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfdad2ded68effd2c6c8daddccd6cbd ...

Attempting to transfer a string variable into a JavaScript scope within an HTML document using handlebars-express

Struggling to pass a variable from server-side to client-side using handlebars-express... After searching through the content here for some time, I realize I might need some help. I've confirmed that the object passed is indeed of string type, but h ...

The JavaScript Top Slide Down effect is malfunctioning

Every time I press the "More" button, I expect some forms to pop out but nothing happens. Can someone please assist me with this issue? <body> <!--Hero Image--> <div class="hero-image"> <div class="hero ...

What are the disadvantages associated with the different methods of submitting data?

My goal is to create an Online testing platform. I have come across two different approaches to verify user-selected answers. Approach 1 <div class="qContainer" index="0"> Who holds the record for scoring 100 centuries in International cricke ...

Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned). The flex-items are stretched and do not have a fixed height, similar to the fle ...

What is the best way to create an HTML5 Range that gracefully degrades?

I want to incorporate the <input type='range' /> element from HTML5 for modern browsers and fallback to a <select /> if needed. Since I am working with Ruby-on-Rails, as a last resort, I could implement something similar to this on th ...

Revealing CSS elements moving from the left to the right

On my website, I have implemented two different menu bars. The first one, in black, stays fixed at the top of the page. The second one, in orange, becomes sticky once it reaches the black bar. At the same time, a small logo image is revealed, previously hi ...

Discover the best practices for integrating media queries using Radium within Material UI components

Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component. I attempted wrapping the button inside Radium import RaisedButton from 'materia ...

Posts labeled with tags are not properly paginating

I've been working on a Django application that showcases posts created through Django's admin interface. These posts include tags implemented using django-taggit () The main page (home.html) is designed to display both posts and their respective ...

Code for switching between accordion panels with a simple button press

I took some code snippets from a website and developed a shopping cart accordion module. The complete code is available on my CodePen profile, you can access it through this link: http://codepen.io/applecool/pen/YXaJLa <div class="summary"> <but ...

The XPath for the span element

Is there a way to obtain the Xpath of the specific element below? <div class="datum"> <span>180 KM</span> </div> The desired value is "180 KM". I am struggling to extract it because the span element lacks a name at ...

Display only the initial word in a hidden input value of an HTML document using NodeJS Express

I have a Node.js application that utilizes EJS as its template engine. On multiple pages, I incorporate hidden inputs and retrieve their values using req.body. Although my body parser in Express is configured correctly, I've noticed an issue where hid ...

Experience a captivating Bootstrap 4 drop menu animation that emerges from beyond the borders of the page

I have a row that contains two divs, one with col-md-11 and the other with col-md-1. Inside the col-md-1 div, there is a dropdown that I want to animate. I am using animate css for the animation, but the issue is that the slideInRight animation starts from ...