fix: fix scroll to top button compatibility with mdbook 0.4.37

example/src/local/announcement-banner.md

@@ -22,10 +22,9 @@ Announcement banner allows you put important messages at the top of the page. It
 
 This book's announcement banner is enabled, you can see it at the top of this page.
 
-However, you may want to enable it for the whole book. You can do this by adding below options to `book.toml` file:
+However, you may want to enable it for the whole book. You can do this by adding below options to `book.toml` file after `[preprocessor.embedify]` section:
 
 ```toml
-[preprocessor.embedify]
 announcement-banner.enable = true
 announcement-banner.id = "0.2.5"
 announcement-banner.theme = "default"

example/src/local/footer.md

@@ -20,10 +20,9 @@ The footer app is useful for displaying copyright information, privacy policy, a
 
 This book's footer is enabled, you can see it at the bottom of this page.
 
-However, you may want to enable it for the whole book. You can do this by adding below options to `book.toml` file:
+However, you may want to enable it for the whole book. You can do this by adding below options to `book.toml` file after `[preprocessor.embedify]` section:
 
 ```toml
-[preprocessor.embedify]
 footer.enable = true
 footer.message = "Copyright © 2024 • Created with ❤️ by [MR-Addict](https://github.com/MR-Addict)"
 ```

example/src/local/scroll-to-top.md

@@ -16,10 +16,9 @@ Scroll to top button app has no options.
 
 <!-- embed ignore end -->
 
-Typically, we want to use it for the whole book. You can do this by adding below options to `book.toml` file:
+Typically, we want to use it for the whole book. You can do this by adding below options to `book.toml` file after `[preprocessor.embedify]` section:
 
 ```toml
-[preprocessor.embedify]
 scroll-to-top.enable = true
 ```
 

example/src/third-party/giscus.md

@@ -26,7 +26,7 @@
 
 This book's giscus is enabled, you can see it at the bottom of this page. And you can also have a try by commenting below.
 
-However, you may want to enable it for the whole book. You can do this by adding below options to `book.toml` file:
+However, you may want to enable it for the whole book. You can do this by adding below options to `book.toml` file after `[preprocessor.embedify]` section:
 
 ```toml
 giscus.enable = true

templates/scroll-to-top.html

@@ -1,7 +1,4 @@
 <style>
-  .scroll-to-top i {
-    transform: translateY(-2px);
-  }
   .scroll-to-top {
     font-size: 2.5rem;
     width: 3.2rem;
@@ -15,17 +12,19 @@
     bottom: 1.25rem;
     right: calc(1.25rem + var(--page-padding));
 
+    z-index: 999;
+    cursor: pointer;
+    color: #fff;
     border: none;
     border-radius: 50%;
-    color: #fff;
     background-color: var(--icons);
-
-    z-index: 999;
-    cursor: pointer;
   }
   .scroll-to-top.hidden {
     display: none;
   }
+  .scroll-to-top i {
+    transform: translateY(-2px);
+  }
   @media (min-width: 768px) {
     .scroll-to-top {
       bottom: 4rem;
@@ -37,16 +36,12 @@
   }
 </style>
 
-<button
-  type="button"
-  aria-label="scroll-top"
-  class="scroll-to-top hidden"
-  onclick="window.scroll({top: 0, behavior: 'smooth'})"
->
+<button type="button" aria-label="scroll-to-top" class="scroll-to-top hidden" onclick="scrollToTop()">
   <i class="fa fa-angle-up"></i>
 </button>
 
 <script>
+  const scrollToTop = () => window.scroll({ top: 0, behavior: "smooth" });
   window.addEventListener("scroll", () => {
     const button = document.querySelector(".scroll-to-top");
     button.classList.toggle("hidden", window.scrollY < 200);