Fixes scrolling to subtitles.

Closes sighingnow#98. Signed-off-by: Tao He <sighingnow@gmail.com>
richardorsey · Aug 27, 2023 · 6f8edb8 · 6f8edb8
1 parent 64643ae
commit 6f8edb8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/_includes/toc-date.html b/_includes/toc-date.html
@@ -1,4 +1,23 @@
 <div class="book-summary">
+    <script type="text/javascript">
+        // Fixes the page links scroll problem on both desktop and mobile browsers
+        function pageScrollToTop(element) {
+            // both mobile and non-mobile
+            $('div.body-inner').animate({scrollTop: 0});
+            $(element).parent().find('li>ul>li').removeClass('active');
+            return true;  // propagate
+        }
+        // Fixes the anchor links scroll problem on mobile browsers
+        function mobilePageScrollToAnchor(element) {
+            $(element).closest('li.chapter').find('ul>li').removeClass('active');
+            $(element).parent().addClass('active');
+            if ($(document).width() <= 1024) {
+                $('div.body-inner').animate({scrollTop: $($(element).attr('href')).get(0).offsetTop});
+            }
+            return true;
+        }
+    </script>
+
     <nav role="navigation">
         <div id="book-search-input" role="search">
             <input type="text" placeholder="Type to search" />
@@ -12,7 +31,7 @@
             {% else %}
             <li class="chapter" data-level="1.1" data-path="{{site.baseurl}}">
             {% endif %}
-                <a href="{{site.baseurl}}/">
+                <a href="{{site.baseurl}}/" onclick="pageScrollToTop(this)">
                     {{ site.title | escape }}
                 </a>
             </li>
@@ -34,7 +53,7 @@
                         {% else %}
                         <li class="chapter" data-level="1.1" data-path="{{site.baseurl}}{{post.url}}">
                         {% endif %}
-                            <a href="{{site.baseurl}}{{post.url}}">
+                            <a href="{{site.baseurl}}{{post.url}}" onclick="pageScrollToTop(this)">
                                 {{ post.title | escape }}
                             </a>
                             {% if site.toc.enabled %}

diff --git a/_includes/toc.html b/_includes/toc.html
@@ -125,7 +125,7 @@
         {% capture anchorBody %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
 
         {% if htmlID %}
-            {% capture anchorAttributes %} href="{% if baseURL %}{{ baseURL }}{% endif %}#{{ htmlID }}"{% endcapture %}
+            {% capture anchorAttributes %} href="{% if baseURL %}{{ baseURL }}{% endif %}#{{ htmlID }}" onclick="mobilePageScrollToAnchor(this)" {% endcapture %}
 
             {% if include.anchor_class %}
                 {% capture anchorAttributes %}{{ anchorAttributes }} class="{{ include.anchor_class | split: '.' | join: ' ' }}"{% endcapture %}

diff --git a/_posts/2021-08-10-toc.md b/_posts/2021-08-10-toc.md
@@ -25,6 +25,12 @@ long contents .....
 3. c
 4. d
 
+### Sub title 1
+
+### Sub title 2
+
+### Sub title 3
+
 Why this repo
 -------------