add a Back to Top floating button

css/guide.css

@@ -72,6 +72,25 @@ nav {
     text-transform: uppercase;
 }
 
+#backToTopButton {
+    position: fixed;
+    bottom: 10px;
+    float: right;
+    right: 10%;
+    left: 90%;
+    max-width: 40px;
+    width: 100%;
+    font-size: 14px;
+    border-color: rgba(85, 85, 85, 0.2);
+    background-color: rgb(100,100,100);
+    padding: .5px;
+    border-radius: 4px;
+}
+
+#backToTopButton:hover {
+    background-color: #7dbbf1;
+}
+
 header a {
     display: flex;
     align-items: center;

index.html

@@ -89,7 +89,9 @@ <h2 id="toc">Contents</h2>
             </div>
         </div>
         <hr/>
-
+
+        <button id="backToTopButton"><a href="#top" style="color: white">Top</a></button>
+
         <p id="introduction" class="first"><a href="https://www.scuttlebutt.nz/">Scuttlebutt</a> is a protocol for building decentralized applications that work well offline and that no one person can control. Because there is no central server, Scuttlebutt clients connect to their peers to exchange information. This guide describes the protocols used to communicate within the Scuttlebutt network.</p>
         <p>Scuttlebutt is a flexible protocol, capable of supporting many different types of applications. One of its first applications was as a social network, and it has also become one of the most compelling because the people who hang out there are not jerks. This guide has a slight focus on how to use Scuttlebutt for social networking, but many of the explanations will still be useful if want to use it for something completely different, or are just curious how it works.</p>