add back to top button to footer

Author: hmillersarah

index.html

@@ -399,38 +399,17 @@ <h3>LinkedIn</h3>
           </div>
 
           <!-- =========================== back to top =========================== -->
-          <div>
-              <img id="btt" src="wp-content/Icon_Back_to_top.svg" alt="Back to top" tabindex="0" role="button">
-          </div>
+
         </main>
       </div>
     </div>
 
-    <imscentral-footer></imscentral-footer>
+    <!-- <div>
+      <img id="btt" src="wp-content/Icon_Back_to_top.svg" alt="Back to top" tabindex="0" role="button">
+    </div> -->
 
     <!-- =========================== Additional Support / Footer links =========================== -->
-    <!-- <footer aria-label="Footer" id="themeFooter">
-      <div id="boomer-footer" class="boomer_footer_menu"></div>
-      <div id="dw-footer" class="ibm-alternate ibm-padding-normal">
-        <div class="ibm-columns ibm-padding-bottom-0">
-          <div class="ibm-col-1-1">
-            <div class="ibm-footer-corporate-links">
-              <ul>
-              <li><a href="https://www.ibm.com/contact/us" target="_blank" style="color: #78A9FF;">Contact</a></li>
-              <li><div></div></li>
-              <li><a href="http://www.ibm.com/privacy/us/en/" target="_blank" style="color: #78A9FF;">Privacy</a></li>
-              <li><div></div></li>
-              <li><a href="https://www.ibm.com/legal?lnk=flg-tous-usen" target="_blank" style="color: #78A9FF;">Terms of use</a></li>
-              <li><div></div></li>
-              <li><a href="http://www.ibm.com/accessibility/us/en/" target="_blank" style="color: #78A9FF;">Accessibility</a></li>
-                    </ul>
-            </div>
-            <p class="copyright">Copyright IBM Corporation 2023, 2025</p>
-            <div id="ibm-footer-locale-selector"></div>
-          </div>
-        </div>
-      </div>
-    </footer> -->
+    <imscentral-footer></imscentral-footer>
 
     <!-- post-load actions/listeners -->
     <script src="jekyll-tipue-search/assets/tipuesearch/postLoad.js"></script>

web-components/footer/footer.css

@@ -31,6 +31,35 @@ p {
     color: #a8a8a8;
 }
 
+#back-to-top {
+    /* display:none; */
+    opacity: 0;
+    z-index: 99;
+    transition: transform .2s;
+    position: fixed;
+    bottom: 5%;
+    right: 5%;
+    animation: fadeInAnimation 2s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+#back-to-top:hover {
+    cursor: pointer;
+    filter: invert(5%);
+    transform: scale(1.2);
+}
+
 @media screen and (max-width: 35em) {
     footer > ul, footer > p {
         padding-left: 1em;

web-components/footer/footer.html

@@ -1,5 +1,8 @@
 <link href="web-components/footer/footer.css" rel="stylesheet">
 <footer>
+    <div>
+        <img id="back-to-top" src="wp-content/Icon_Back_to_top.svg" alt="Back to top" tabindex="0" role="button">
+    </div>
     <ul>
         <li><a href="https://www.ibm.com/contact/us" target="_blank">Contact</a></li>
         <li><div></div></li>

web-components/footer/footer.js

@@ -28,6 +28,29 @@ function createComponent(html) {
             // Create shadow root for element
             const shadow = this.attachShadow({mode: 'closed'});
             shadow.innerHTML = html;
+
+            const backToTopBtn = shadow.getElementById('back-to-top');
+            window.onscroll = () => {
+                if (document.body.scrollTop > 450 || document.documentElement.scrollTop > 450) {
+                    backToTopBtn.style.opacity = '1';
+                    // backToTopBtn.style.display = 'block';
+                    // backToTopBtn.style.animation = 'fadeIn 1s';
+                } else {
+                    backToTopBtn.style.opacity = '0';
+                    // backToTopBtn.style.display = 'none';
+                }
+            }
+
+            backToTopBtn.addEventListener('click', () => {
+                document.body.scrollTop = 0;
+                document.documentElement.scrollTop = 0;
+            })
+            backToTopBtn.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter') {
+                    document.body.scrollTop = 0;
+                    document.documentElement.scrollTop = 0;
+                }
+            })
         }
     }