57 lines
2.9 KiB
Markdown
57 lines
2.9 KiB
Markdown
---
|
|
title: "Adding A (Better) Scroll To Top Button Without JavaScript"
|
|
description: "The title is very self-explanatory"
|
|
cover: /assets/pngs/code.png
|
|
date: 2020-05-11T20:39:00-04:00
|
|
categories:
|
|
- Technology
|
|
tags:
|
|
- 100 Days To Offload
|
|
- HTML
|
|
- CSS
|
|
- Websites
|
|
toc: true
|
|
---
|
|
I'm a fan of using as little JavaScript as feasible on a website and implementing a scroll-to-top button in JS is just ridiculous. Nevertheless, there seems to be a plethora of copypasta for it so I thought I would write about implementing one in pure HTML and CSS. The title is just a playful poke at [Kev Quirk](https://kevq.uk) who recently posted about [exactly the same thing](https://kevq.uk/adding-a-scroll-to-top-button-without-javascript/) but with different styling 😉
|
|
|
|
## HTML
|
|
There's only one attribute to add to an existing HTML tag near the top of your page and a single line for the button itself.
|
|
|
|
For the attribute, you'll need to use an [ID](https://www.w3schools.com/hTML/html_id.asp). When the button is clicked, the user will be taken to whatever element has this attribute. For my site, I simply added it to the header at the very top.
|
|
```html
|
|
<header class="header" id="top">
|
|
```
|
|
|
|
All that's required for the button is:
|
|
```html
|
|
<a href="#top"><button class="top">Top</button></a>
|
|
```
|
|
|
|
## CSS
|
|
The basic HTML above is exactly the same as what Kev's article has. The CSS is where ours will diverge. Having a button at the very bottom of the page is perfectly fine but I use my site as more than a blog; it's reasonable to expect visitors to simply search for a link or whatever else and move on. Having a floating button that stays in the same place as the user scrolls is a good way to facilitate this.
|
|
|
|
```css
|
|
.top {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
max-width: 50px;
|
|
max-height: 50px;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: .5px;
|
|
border-radius: 8px;
|
|
justify-content: center;
|
|
background: #3b3d42;
|
|
font-size: 1rem;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
```
|
|
|
|
The `position`, `bottom`, and `right` lines are what tell your browser to render the item in the bottom right. The position is `fixed` so that means we can put it wherever on the page we want and it will stay there as the user scrolls. `right` and `bottom` say that the element is to be positioned 10 pixels above the bottom of the page and 10 pixels from the right. It's rather hidden on desktop but I'm not expecting desktop users to click it very often; that's what the `Home` key is for, after all, and it works across every website. I'm expecting mobile users to make use of it the most.
|
|
|
|
---
|
|
This was posted as part of [#100DaysToOffload](https://100daystooffload.com/), an [awesome idea](https://fosstodon.org/@kev/104053977554016690) from [Kev Quirk](https://kevq.uk/). If you want to participate, just write something every day for 100 days and post a link on social media with the hashtag!
|