Always close the top bar when smooth scrolling

_javascript/commons/topbar-switch.js

@@ -3,50 +3,50 @@
  */
 
 $(function() {
+  const $topbarWrapper = $("#topbar-wrapper");
+  const $panel = $("#panel-wrapper");
+  const $searchInput = $("#search-input");
 
-  const topbarWrapper = $("#topbar-wrapper");
-  const toc = $("#toc-wrapper");
-  const access = $(".access");
-  const searchInput = $("#search-input");
+  const CLASS_TOPBAR_UP = "topbar-up";
+  const CLASS_TOPBAR_DOWN = "topbar-down";
+  const ATTR_TOC_SCROLLING_UP = "toc-scrolling-up"; // topbar locked
 
   let didScroll;
   let lastScrollTop = 0;
 
-  const delta = 5;
-  const topbarHeight = topbarWrapper.outerHeight();
+  const delta = $topbarWrapper.outerHeight();
+  const topbarHeight = $topbarWrapper.outerHeight();
 
   function hasScrolled() {
-    var st = $(this).scrollTop();
+    let st = $(this).scrollTop();
 
     /* Make sure they scroll more than delta */
     if (Math.abs(lastScrollTop - st) <= delta) {
       return;
     }
 
-    if (st > lastScrollTop && st > topbarHeight) {
-      /* Scroll Down */
-      topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
+    if (st > lastScrollTop ) { // Scroll Down
+      if (st > topbarHeight) {
+        $topbarWrapper.removeClass(CLASS_TOPBAR_DOWN).addClass(CLASS_TOPBAR_UP);
+        $panel.removeClass(CLASS_TOPBAR_DOWN);
 
-      if (toc.length > 0) {
-        toc.removeClass("topbar-down");
+        if ($searchInput.is(":focus")) {
+          $searchInput.blur(); /* remove focus */
+        }
       }
+    } else  {// Scroll up
+      // did not reach the bottom of the document, i.e., still have space to scroll up
+      if (st + $(window).height() < $(document).height()) {
+        let tocScrollingUp = $topbarWrapper.attr(ATTR_TOC_SCROLLING_UP);
+        if (typeof tocScrollingUp !== "undefined") {
+          if (tocScrollingUp === "false") {
+            $topbarWrapper.removeAttr(ATTR_TOC_SCROLLING_UP);
+          }
 
-      if (access.length > 0) {
-        access.removeClass("topbar-down");
-      }
-
-      if (searchInput.is(":focus")) {
-        searchInput.blur(); /* remove focus */
-      }
-
-    } else if (st + $(window).height() < $(document).height()) {
-      /* Scroll Up */
-      topbarWrapper.removeClass("topbar-up").addClass("topbar-down");
-      if (toc.length > 0) {
-        toc.addClass("topbar-down");
-      }
-      if (access.length > 0) {
-        access.addClass("topbar-down");
+        } else {
+          $topbarWrapper.removeClass(CLASS_TOPBAR_UP).addClass(CLASS_TOPBAR_DOWN);
+          $panel.addClass(CLASS_TOPBAR_DOWN);
+        }
       }
     }
 
@@ -54,7 +54,7 @@ $(function() {
   }
 
   $(window).scroll(function(event) {
-    if ($("#topbar-title").is(":hidden")) { /* Not in small screens */
+    if ($("#topbar-title").is(":hidden")) {
       didScroll = true;
     }
   });

_javascript/utils/smooth-scroll.js

@@ -8,15 +8,19 @@
 */
 
 $(function() {
+  const $topbarWrapper = $("#topbar-wrapper");
+  const topbarHeight = $topbarWrapper.outerHeight();
   const $topbarTitle = $("#topbar-title");
-  const topbarHeight = $("#topbar-wrapper").outerHeight();
+
+  const ATTR_TOC_SCROLLING = "toc-scrolling-up";
   const SCROLL_MARK = "scroll-focus";
+  const REM = 16; // in pixels
+  let tocScrollUpCount = 0;
 
   $("a[href*='#']")
     .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);
@@ -27,6 +31,7 @@ $(function() {
 
           let parent = $(this).parent().prop("tagName");
           let isAnchor = RegExp(/^H\d/).test(parent);
+          let isMobileViews = !$topbarTitle.is(":hidden");
 
           if (typeof $target !== "undefined") {
             event.preventDefault();
@@ -36,18 +41,27 @@ $(function() {
             }
 
             let curOffset = isAnchor? $(this).offset().top : $(window).scrollTop();
-            let destOffset = $target.offset().top;
+            let destOffset = $target.offset().top -= REM / 2;
 
             if (destOffset < curOffset) { // scroll up
-              if (!isAnchor && !toFootnote && $topbarTitle.is(":hidden")) { // the ToC item
+              if (!isAnchor && !toFootnote) { // trigger by ToC item
+                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) {
                 destOffset -= topbarHeight;
+                console.log(`[smooth] mobile -= topbar height`);
               }
             }
 
-            $("html,body").animate({
+            $("html").animate({
               scrollTop: destOffset
-
-            }, 800, () => {
+            }, 500, () => {
               $target.focus();
 
               /* clean up old scroll mark */
@@ -71,6 +85,14 @@ $(function() {
                 $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");
+                }
+              }
             });
           }
         }