Added js to allow sidebar links to jump to an anchor without being hidden by the header

See merge request !4

Added js to allow sidebar links to jump to an anchor without being hidden by the header
See merge request !4
0a98599b · Kristina Hoeppner · 9085a5c4 · cf670c41 · 0a98599b
Commit 0a98599b authored Jul 13, 2019 by Kristina Hoeppner
Hide whitespace changes
Inline Side-by-side

Showing with 24 additions and 0 deletions

source/mahara/layout.html source/mahara/layout.html +24 -0

No files found.
--- a/source/mahara/layout.html
+++ b/source/mahara/layout.html
@@ -249,6 +249,30 @@
    <noscript><p><img src="//www.catalyst-analytics.nz/piwik.php?idsite=5" style="border:0;" alt="" /></p></noscript>
    <!-- End Piwik Code -->

+    <script type="text/javascript">
+    /**
+     * Offset html anchors for fixed header
+     */
+    jQuery(function($) {
+        $(document).on('click', 'a', function(event) {
+            if ($(this.hash).length && location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')) {
+                event.preventDefault();
+                var target = $(this.hash);
+                var headerheight = 0;
+                if ($('#navbar-top').length) {
+                    headerheight = $('#navbar-top').height();
+                }
+                else if ($('.container-fluid').length) {
+                    headerheight = $('.container-fluid').offset().top;
+                }
+                $('html, body').animate({
+                    scrollTop: (target.offset().top - (headerheight * 2))
+                }, 500);
+            }
+        });
+    });
+    </script>
+
    {% endblock %}
  </head>
  <body role="document">