add a top-margin to all elements which get referenced by anchor-urls,…

js/common.js

@@ -23,79 +23,6 @@ var PHP_NET = {};
 
 PHP_NET.HEADER_HEIGHT = 52;
 
-/**
- * Scrolls the page so that the given element will be shown into view.
- *
- * @param HTMLElement element The element to show.
- * @param Number animationDuration Animation duration in milliseconds. Defaults to 400ms.
- * @param Function callback Function to execute after the animation is complete.
- * @return void
- */
-PHP_NET.scrollElementIntoView = function (element, animationDuration, callback) {
-    animationDuration = animationDuration || 400;
-    var destTop = $(element).offset().top - PHP_NET.HEADER_HEIGHT;
-    var callbackCalled = false;
-    // Online sources claim that some browsers scroll body, others scroll html
-    // so we scroll both for compatibility. However, the callback function is
-    // called for each element so the callback function will trigger twice,
-    // once for html and once for body. This is why we track whether the
-    // callback has been called to prevent multiple executions.
-    $("html, body").animate(
-        {scrollTop: destTop},
-        animationDuration,
-        function () {
-            if (!callbackCalled) {
-                callbackCalled = true;
-                callback();
-            }
-        }
-    );
-};
-
-/**
- * Enables "smooth scrolling to page anchor" for page <a> links.
- */
-document.body.addEventListener("click", function (e) {
-    if (e.target && e.target.nodeName === "A") {
-        var href = e.target.getAttribute("href");
-        if (href && href[0] === "#") {
-            var id = href.slice(1);
-            var target = document.getElementById(id);
-            // temporarily remove the id="" attribute so that the UA's
-            // default scrolling is prevented
-            target.id = "";
-            if (target) {
-                PHP_NET.scrollElementIntoView(target, null, function () {
-                    // restore the id="" attribute
-                    target.id = id;
-                });
-            }
-        }
-    }
-});
-
-/**
- * Enables "smooth scrolling to page anchor" when page was just loaded.
- */
-document.addEventListener("DOMContentLoaded", function () {
-    var target = (location.hash
-        ? document.getElementById(location.hash.slice(1))
-        : null
-    );
-    if (target) {
-        // temporarily remove the id="" attribute so that the UA's default
-        // scrolling is prevented
-        var id = target.id;
-        target.id = "";
-        window.addEventListener("load", function () {
-            PHP_NET.scrollElementIntoView(target, null, function() {
-                // restore the id="" attribute to the element
-                target.id = id;
-            });
-        });
-    }
-});
-
 Mousetrap.bind('up up down down left right left right b a enter', function() {
         $(".brand img").attr("src", "/images/php_konami.gif");
 });

styles/theme-base.css

@@ -54,6 +54,7 @@ html {
   font-size: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
+  scroll-behavior: smooth;
 }
 a {
   border-bottom:1px solid;
@@ -1528,6 +1529,11 @@ div.soft-deprecation-notice blockquote.sidebar {
   body {
     margin:3.25rem 0 0;
   }
+  /* add a top-margin to all elements which get referenced by anchor-urls, so they are not covered by the fixed header */
+  [id] {
+    scroll-margin-top: 3.25rem;
+  }
+
   #breadcrumbs {
     display:block;
   }