Fix: clicking pagination will cause the page scrolling

mkdocs_blogging_plugin/templates/blog.html

@@ -36,13 +36,6 @@
     .md-typeset .post-tags {
         float: right;
     }
-    .md-typeset .pages > * {
-        display: none;
-    }
-    .md-typeset .pages > :target,
-    .md-typeset .pages {
-        display: block;
-    }
     .md-typeset .center {
         text-align: center;
     }
@@ -67,7 +60,7 @@
     .md-typeset .pagination a:hover:not(.active) {
         background-color: #dddddda1;
     }
-    .md-typeset .nopaging {
+    .md-typeset .hidden {
         display: none;
     }
 </style>
@@ -119,11 +112,11 @@ <h3 class="post-title">
 {% endfor %}
 </div>
 
-<div class="center {{'nopaging' if page_num == 1 else '' }}">
+<div class="center {{'hidden' if page_num == 1 else '' }}">
     <div class="pagination " id="pagination">
     {% for num in range(page_num) %}
         <a class="page-number"
-            href="#page{{ num + 1 }}">{{ num + 1 }}</a>
+            href="#blog-p{{ num + 1 }}">{{ num + 1 }}</a>
     {% endfor %}
     </div>
     {% if show_total %}

mkdocs_blogging_plugin/templates/pagination.js

@@ -1,29 +1,46 @@
 var currentPage = 0
 const lastComponent = window.location.href.split("/").slice(-1).pop()
 
-if (lastComponent && lastComponent.slice(0, 5) == "#page") {
-    const page = parseInt(lastComponent.slice(5))
-    if (page) {
-        currentPage = page - 1
-    }
+if (lastComponent && lastComponent.slice(0, 7) == "#blog-p") {
+  const page = parseInt(lastComponent.slice(7))
+  if (page) {
+    currentPage = page - 1
+  }
 }
 
 var pagination = document.getElementById("pagination");
 if (pagination) {
-    var links = pagination.getElementsByClassName("page-number");
-    if (links.length) {
-        for (var i = 0; i < links.length; i++) {
-            links[i].addEventListener("click", function () {
-                var current = pagination.getElementsByClassName("active");
-                if (current.length) {
-                    current[0].className = current[0].className.replace(
-                        " active", ""
-                    );
-                }
-                this.className += " active";
-            });
+  var links = pagination.getElementsByClassName("page-number");
+  if (links.length) {
+    for (var i = 0; i < links.length; i++) {
+      // Toggle pagination highlight
+      links[i].addEventListener("click", function () {
+        var current = pagination.getElementsByClassName("active");
+        if (current.length) {
+          current[0].className = current[0].className.replace(
+            " active", ""
+          );
+        }
+        this.className += " active";
+
+        // Togglg visibility of pages
+        const destPage = parseInt(this.textContent)
+        var pages = document.getElementsByClassName("page")
+        if (destPage && pages.length) {
+          for (var j = 0; j < pages.length; j++) {
+            const pageId = parseInt(pages[j].id.replace("page", ""))
+            if (pageId != destPage) {
+              // This is not the destination page
+              pages[j].className += " hidden"
+            } else {
+              // This is the destination page
+              pages[j].className = pages[j].className.replace(" hidden", "")
+            }
+          }
         }
-        links[currentPage].className += " active"
-        links[currentPage].click();
+      });
     }
+    links[currentPage].className += " active"
+    links[currentPage].click();
+  }
 }

setup.py

@@ -12,7 +12,7 @@
 
 setup(
     name="mkdocs-blogging-plugin",
-    version="0.1.3",
+    version="0.1.4",
     description="Mkdocs plugin that generates a blog index page sorted by creation date.",
     long_description=LONG_DESCRIPTION,
     long_description_content_type="text/markdown",