Prevent the top bar from covering the heading when scrolling down (in mobile views)

_javascript/utils/smooth-scroll.js

@@ -21,81 +21,92 @@ $(function() {
     .not("[href='#']")
     .not("[href='#0']")
     .click(function(event) {
-      if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) {
-        if (location.hostname === this.hostname) {
-          const hash = decodeURI(this.hash);
-          let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
-          let toFootnote = toFootnoteRef? false : RegExp(/^#fn:/).test(hash);
-          let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
-          let $target = $(selector);
 
-          let parent = $(this).parent().prop("tagName");
+      if (this.pathname.replace(/^\//, "") !== location.pathname.replace(/^\//, "")) {
-          let isAnchor = RegExp(/^H\d/).test(parent);
+        return;
-          let isMobileViews = !$topbarTitle.is(":hidden");
+      }
 
-          if (typeof $target !== "undefined") {
+      if (location.hostname !== this.hostname) {
-            event.preventDefault();
+        return;
+      }
 
-            if (history.pushState) { /* add hash to URL */
+      const hash = decodeURI(this.hash);
-              history.pushState(null, null, hash);
+      let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
-            }
+      let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
+      let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
+      let $target = $(selector);
 
-            let curOffset = isAnchor? $(this).offset().top : $(window).scrollTop();
+      let parent = $(this).parent().prop("tagName");
-            let destOffset = $target.offset().top -= REM / 2;
+      let isAnchor = RegExp(/^H\d/).test(parent);
+      let isMobileViews = !$topbarTitle.is(":hidden");
 
-            if (destOffset < curOffset) { // scroll up
+      if (typeof $target === "undefined") {
-              if (!isAnchor && !toFootnote) { // trigger by ToC item
+        return;
-                if (!isMobileViews) { // on desktop/tablet screens
+      }
-                  $topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
-                  // Send message to `${JS_ROOT}/commons/topbar-switch.js`
-                  $topbarWrapper.attr(ATTR_TOC_SCROLLING, true);
-                  tocScrollUpCount += 1;
-                }
-              }
 
-              if ((isAnchor || toFootnoteRef) && isMobileViews) {
+      event.preventDefault();
-                destOffset -= topbarHeight;
-              }
-            }
 
-            $("html").animate({
+      if (history.pushState) { /* add hash to URL */
-              scrollTop: destOffset
+        history.pushState(null, null, hash);
-            }, 500, () => {
+      }
-              $target.focus();
 
-              /* clean up old scroll mark */
+      let curOffset = isAnchor ? $(this).offset().top : $(window).scrollTop();
-              if ($(`[${SCROLL_MARK}=true]`).length) {
+      let destOffset = $target.offset().top -= REM / 2;
-                $(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
-              }
 
-              /* Clean :target links */
+      if (destOffset < curOffset) { // scroll up
-              if ($(":target").length) { /* element that visited by the URL with hash */
+        if (!isAnchor && !toFootnote) { // trigger by ToC item
-                $(":target").attr(SCROLL_MARK, false);
+          if (!isMobileViews) { // on desktop/tablet screens
-              }
+            $topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
-
+            // Send message to `${JS_ROOT}/commons/topbar-switch.js`
-              /* set scroll mark to footnotes */
+            $topbarWrapper.attr(ATTR_TOC_SCROLLING, true);
-              if (toFootnote || toFootnoteRef) {
+            tocScrollUpCount += 1;
-                $target.attr(SCROLL_MARK, true);
-              }
-
-              if ($target.is(":focus")) { /* Checking if the target was focused */
-                return false;
-              } else {
-                $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
-                $target.focus(); /* Set focus again */
-              }
-
-              if (typeof $topbarWrapper.attr(ATTR_TOC_SCROLLING) !== "undefined") {
-                tocScrollUpCount -= 1;
-
-                if (tocScrollUpCount <= 0) {
-                  $topbarWrapper.attr(ATTR_TOC_SCROLLING, "false");
-                }
-              }
-            });
           }
         }
+
+        if ((isAnchor || toFootnoteRef) && isMobileViews) {
+          destOffset -= topbarHeight;
+        }
+
+      } else {
+        if (isMobileViews) {
+          destOffset -= topbarHeight;
+        }
       }
 
+      $("html").animate({
+        scrollTop: destOffset
+      }, 500, () => {
+        $target.focus();
+
+        /* clean up old scroll mark */
+        if ($(`[${SCROLL_MARK}=true]`).length) {
+          $(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
+        }
+
+        /* Clean :target links */
+        if ($(":target").length) { /* element that visited by the URL with hash */
+          $(":target").attr(SCROLL_MARK, false);
+        }
+
+        /* set scroll mark to footnotes */
+        if (toFootnote || toFootnoteRef) {
+          $target.attr(SCROLL_MARK, true);
+        }
+
+        if ($target.is(":focus")) { /* Checking if the target was focused */
+          return false;
+        } else {
+          $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
+          $target.focus(); /* Set focus again */
+        }
+
+        if (typeof $topbarWrapper.attr(ATTR_TOC_SCROLLING) !== "undefined") {
+          tocScrollUpCount -= 1;
+
+          if (tocScrollUpCount <= 0) {
+            $topbarWrapper.attr(ATTR_TOC_SCROLLING, "false");
+          }
+        }
+      });
     }); /* click() */
 });