update. 优化模板结构

templates/base.html

@@ -16,7 +16,7 @@
         <div>
             <h1>{{ site_info.title }}</h1>
             <p>{{ site_info.e_title }}</p>
-                        <p>CHANGBAI MOUNTAIN FIRE AND RESCUE BRIGADE</p>
+            <p>CHANGBAI MOUNTAIN FIRE AND RESCUE BRIGADE</p>
         </div>
     </div>
     <div></div>
@@ -159,10 +159,59 @@
         </div>
     </div>
 </footer>
+<button id="backToTop"
+        class="btn btn-primary rounded-circle shadow d-none"
+        style="position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; z-index: 1000; font-size: 20px;"
+        title="回到顶部">
+    ↑
+</button>
+
 
 <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
+<!-- 2. JavaScript 逻辑 -->
+<script>
+    // 获取按钮元素
+    const backToTopBtn = document.getElementById("backToTop");
 
+    // 监听页面滚动事件
+    window.addEventListener("scroll", function () {
+        // 当页面向下滚动超过 300px 时显示按钮，否则隐藏
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            backToTopBtn.classList.remove("d-none");
+            // 可选：添加淡入动画类
+            backToTopBtn.classList.add("fade-in");
+        } else {
+            backToTopBtn.classList.add("d-none");
+            backToTopBtn.classList.remove("fade-in");
+        }
+    });
+
+    // 监听按钮点击事件
+    backToTopBtn.addEventListener("click", function () {
+        // 平滑滚动到顶部
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    });
+</script>
+
+<!-- 3. 可选：添加简单的淡入淡出 CSS 动画 -->
+<style>
+    .fade-in {
+        animation: fadeIn 0.3s ease-in-out;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+</style>
 <!-- 页面底部脚本 -->
 {% block extra_js %}{% endblock %}
 </body>