1---
 2title: "Adding A (Better) Scroll To Top Button Without JavaScript"
 3description: "The title is very self-explanatory"
 4cover: /assets/pngs/code.png
 5date: 2020-05-11T20:39:00-04:00
 6categories:
 7  - Technology
 8tags:
 9  - 100 Days To Offload
10  - HTML
11  - CSS
12  - Websites
13toc: true
14---
15
16I'm a fan of using as little JavaScript as feasible on a website and
17implementing a scroll-to-top button in JS is just ridiculous.
18Nevertheless, there seems to be a plethora of copypasta for it so I
19thought I would write about implementing one in pure HTML and CSS. The
20title is just a playful poke at [Kev Quirk](https://kevq.uk) who
21recently posted about [exactly the same
22thing](https://kevq.uk/adding-a-scroll-to-top-button-without-javascript/)
23but with different styling 😉
24
25## HTML
26There's only one attribute to add to an existing HTML tag near the top
27of your page and a single line for the button itself.
28
29For the attribute, you'll need to use an
30[ID.](https://www.w3schools.com/hTML/html_id.asp) When the button is
31clicked, the user will be taken to whatever element has this attribute.
32For my site, I simply added it to the header at the very top.
33
34``` html
35<header class="header" id="top">
36```
37
38All that's required for the button is:
39
40``` html
41<a href="#top"><button class="top">Top</button></a>
42```
43
44## CSS
45The basic HTML above is exactly the same as what Kev's article has. The
46CSS is where ours will diverge. Having a button at the very bottom of
47the page is perfectly fine but I use my site as more than a blog; it's
48reasonable to expect visitors to simply search for a link or whatever
49else and move on. Having a floating button that stays in the same place
50as the user scrolls is a good way to facilitate this.
51
52``` css
53.top {
54  position: fixed;
55  bottom: 10px;
56  right: 10px;
57  max-width: 50px;
58  max-height: 50px;
59  width: 100%;
60  height: 100%;
61  padding: .5px;
62  border-radius: 8px;
63  justify-content: center;
64  background: #3b3d42;
65  font-size: 1rem;
66  font-weight: 800;
67  text-decoration: none;
68  cursor: pointer;
69}
70```
71
72The `position`, `bottom`, and `right` lines are what tell your browser
73to render the item in the bottom right. The position is `fixed` so that
74means we can put it wherever on the page we want and it will stay there
75as the user scrolls. `right` and `bottom` say that the element is to be
76positioned 10 pixels above the bottom of the page and 10 pixels from the
77right. It's rather hidden on desktop but I'm not expecting desktop users
78to click it very often; that's what the `Home` key is for, after all,
79and it works across every website. I'm expecting mobile users to make
80use of it the most.
81
82---
83
84This was posted as part of
85[#100DaysToOffload](https://100daystooffload.com/), an [awesome
86idea](https://fosstodon.org/@kev/104053977554016690) from [Kev
87Quirk](https://kevq.uk/). If you want to participate, just write
88something every day for 100 days and post a link on social media with
89the hashtag!