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