[Feature] Implements a scroll-to-top element for longer page contexts

docs/index.html

@@ -937,6 +937,29 @@ <h2>Title</h2>
 </pre>
 
 
+<h3 id="scroll-to-top">Scroll to Top - Block</h3><a class="permalink" href="#scroll-to-top">permalink</a>
+
+<h4>Expected Contexts</h3>
+<ul>
+<li>The 
+  <span class="distinct">Scroll to top</span> element appears just before the opening 
+  <span class="distinct">Footer</span> tag and immediately after the closing 
+  <span class="distinct">Main</span> tag, and appears only once per page, on all page levels.
+</li>
+
+</ul>
+
+<pre>
+<code class="lang-html">
+
+  <aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+  </aside>
+
+</code>
+</pre>
+
+
 <h3 id="page-header-region">Page Header - Region</h3><a class="permalink" href="#page-header-region">permalink</a>
 
 <h4>Expected Contexts</h4>
@@ -993,7 +1016,7 @@ <h1>Name</h1>
      </div>
 
   </header>
-
+  
 </code>
 </pre>
 

specimen/contexts/archive-page.html

@@ -241,6 +241,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/blog-index.html

@@ -594,6 +594,11 @@ <h2>Images Attribution</h2>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/blog-post.html

@@ -287,6 +287,11 @@ <h3><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/default-page.html

@@ -204,6 +204,11 @@ <h3>Steps to launch</h3>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/home-index.html

@@ -460,6 +460,11 @@ <h2>Images Attribution</h2>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/license-page.html

@@ -107,6 +107,11 @@ <h1>License</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/person-page.html

@@ -203,6 +203,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/program-index.html

@@ -207,6 +207,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/program-page.html

@@ -188,6 +188,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/search-index.html

@@ -229,6 +229,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/team-index.html

@@ -159,6 +159,11 @@ <h2>Be a part of our team</h2>
     <a href="#">Check Open Positions</a>
 </article> -->
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/contexts/walkthrough-page.html

@@ -115,6 +115,11 @@ <h1>Walkthrough</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/index-logo.html

@@ -97,6 +97,11 @@ <h1>Index Logo Specimen</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/product-logo.html

@@ -92,6 +92,11 @@ <h1>Product Logo Specimen</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/tests/grid-sidebar.html

@@ -133,6 +133,11 @@ <h1>Grid Testing</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/tests/grid.html

@@ -133,6 +133,11 @@ <h1>Grid Testing</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

specimen/tests/kitchensink.html

@@ -563,6 +563,11 @@ <h2>Images Attribution</h2>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 

src/css/vocabulary.css

@@ -46,6 +46,7 @@ body {
     display: grid;
     grid-template-columns: 5% 3% 6% 6% 15% 30% 15% 6% 6% 3% 5%;
     overflow-x: hidden;
+    position: relative;
 
     font-weight: 400;
     -moz-osx-font-smoothing: grayscale;
@@ -1795,6 +1796,53 @@ body > footer .license svg {
 
 /* program-page context */
 
+/* scroll to top element */
+
+.scroll-to-top-wrapper {
+    position: absolute;
+    left: 0;
+    bottom: 470px;
+    display: grid;
+    grid-template-columns: inherit;
+    width: 100%;
+    height: calc(100% - 220vh); /* to account for the top offset */
+    pointer-events: none;
+    backface-visibility: hidden;
+    overflow: clip;
+}
+
+.scroll-to-top {
+    position: sticky;
+    top: 88vh;
+    grid-column: 10 / span 1;
+    width: 2.5em;
+    height: 2.5em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: all;
+    margin-bottom: 10px;
+
+    border-radius: 50%;
+    text-decoration: none; 
+    background-color: var(--vocabulary-neutral-color-lighter-gray);
+
+}
+
+.scroll-to-top:before {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    content: var(--fa-angle-up);
+}
+
+.scroll-to-top:hover {
+    background-color: var(--vocabulary-brand-color-tomato);
+}
+
+.scroll-to-top:focus {
+    outline: 2px solid var(--vocabulary-brand-color-dark-tomato)
+}
 
 /* responsive contexts */
 
@@ -1830,7 +1878,11 @@ body > footer .license svg {
         display: flex;
         flex-wrap: wrap;
     }
-
+
+    .scroll-to-top{
+        display: none;
+    }
+
     main article.posts.related ul {
         grid-template-columns: 1fr 1fr;
     }
@@ -1911,7 +1963,6 @@ body > footer .license svg {
     .search-index .search-form form button {
         width: 20%;
     }
-
 }
 
 @media (max-width: 680px) {