com web/php: enable css-native smooth scrolling: js/common.js styles/theme-base.css

Commit: 6c8c2aa18c4a691b54f58b389c349a6d089c82e0 Author: Markus Staab <maggus.staab@googlemail.com> Tue, 25 Aug 2020 15:01:53 +0200 Committer: Peter Cowburn <salathe@php.net> Tue, 25 Aug 2020 16:38:31 +0100 Parents: 69e43607aa49a54c685db6891d8537e67502e1c2 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=6c8c2aa18c4a691b54f58b389c349a6d089c82e0 Log: enable css-native smooth scrolling remove javascript scroll magic add a top-margin to all elements which get referenced by anchor-urls, so they are not covered by the fixed header Changed paths: M js/common.js M styles/theme-base.css Diff: diff --git a/js/common.js b/js/common.js index 90b52f315..8813243a7 100644 --- a/js/common.js +++ b/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"); }); diff --git a/styles/theme-base.css b/styles/theme-base.css index 79423cbee..5a55a0815 100644 --- a/styles/theme-base.css +++ b/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; }