From 49eeb146e04e19fb00e1189e13f06e79c8a96f5f Mon Sep 17 00:00:00 2001 From: Zachary Klosko <kloskoz@vcu.edu> Date: Sun, 24 May 2020 10:43:46 -0400 Subject: [PATCH] Scroll to top now on all pages --- docs/_layouts/default.html | 46 +++++++++++++++++++++++++++++++++++++ docs/_layouts/docs.html | 47 -------------------------------------- 2 files changed, 46 insertions(+), 47 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 9c9ff7ee3..5f2faff57 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -48,6 +48,15 @@ </div> </nav> + <!-- Scroll to Top link --> + + <a class="top-link hide" href="" id="js-top"> + <svg class="bi bi-arrow-up-circle-fill" width="4em" height="4em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-10.646.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/> + </svg> + <span class="screen-reader-text">Back to top</span> + </a> + <div class="container-lg"> <nav class="content"> {{ content }} @@ -69,5 +78,42 @@ <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script> + <!-- For Scroll to Top text; from https://getflywheel.com/layout/sticky-back-to-top-button-tutorial/ --> + <script> + // Set a variable for our button element. + const scrollToTopButton = document.getElementById('js-top'); + + const scrollFunc = () => { + // Get the current scroll value + let y = window.scrollY; + + // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it! + if (y > 0) { + scrollToTopButton.className = "top-link show"; + } else { + scrollToTopButton.className = "top-link hide"; + } + }; + window.addEventListener("scroll", scrollFunc); + const scrollToTop = () => { + // Let's set a variable for the number of pixels we are from the top of the document. + const c = document.documentElement.scrollTop || document.body.scrollTop; + + // If that number is greater than 0, we'll scroll back to 0, or the top of the document. + // We'll also animate that scroll with requestAnimationFrame: + // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame + if (c > 0) { + window.requestAnimationFrame(scrollToTop); + // ScrollTo takes an x and a y coordinate. + // Increase the '10' value to get a smoother/slower scroll! + window.scrollTo(0, c - c / 10); + } + }; + // When the button is clicked, run our ScrolltoTop function above! + scrollToTopButton.onclick = function(e) { + e.preventDefault(); + scrollToTop(); + } + </script> </body> </html> diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html index 18d29d3bc..216112162 100644 --- a/docs/_layouts/docs.html +++ b/docs/_layouts/docs.html @@ -58,15 +58,6 @@ layout: default </div> </nav> - <!-- Scroll to Top link --> - - <a class="top-link hide" href="" id="js-top"> - <svg class="bi bi-arrow-up-circle-fill" width="4em" height="4em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-10.646.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/> - </svg> - <span class="screen-reader-text">Back to top</span> - </a> - <!-- Sidebar --> <nav id="sidebar"> @@ -112,43 +103,5 @@ layout: default <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> - - <!-- For Scroll to Top text; from https://getflywheel.com/layout/sticky-back-to-top-button-tutorial/ --> - <script> - // Set a variable for our button element. - const scrollToTopButton = document.getElementById('js-top'); - - const scrollFunc = () => { - // Get the current scroll value - let y = window.scrollY; - - // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it! - if (y > 0) { - scrollToTopButton.className = "top-link show"; - } else { - scrollToTopButton.className = "top-link hide"; - } - }; - window.addEventListener("scroll", scrollFunc); - const scrollToTop = () => { - // Let's set a variable for the number of pixels we are from the top of the document. - const c = document.documentElement.scrollTop || document.body.scrollTop; - - // If that number is greater than 0, we'll scroll back to 0, or the top of the document. - // We'll also animate that scroll with requestAnimationFrame: - // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame - if (c > 0) { - window.requestAnimationFrame(scrollToTop); - // ScrollTo takes an x and a y coordinate. - // Increase the '10' value to get a smoother/slower scroll! - window.scrollTo(0, c - c / 10); - } - }; - // When the button is clicked, run our ScrolltoTop function above! - scrollToTopButton.onclick = function(e) { - e.preventDefault(); - scrollToTop(); - } - </script> </body> </html>