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