Update go to top button

ego008 · Jun 23, 2024 · 47d5fc2 · 47d5fc2
1 parent 7a694b3
commit 47d5fc2
Show file tree

Hide file tree

Showing 4 changed files with 318 additions and 315 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -345,16 +345,15 @@ body>footer a:hover {color: #eee}
 .tag_meta {color: #ccc;font-size: 12px;}
 .rsptime {padding: 0 .5em .5em .5em;background-image:none;border-bottom:none;font-size: .85em;color: #778899;background-color: var(--bar-bg-color);}
 
-#go-to-top {
-    display: none;
+a.top {
+    font-size: 0;
+    font-family: Helvetica,Arial,Verdana,sans-serif;
     position: fixed;
-    right: 60px;
     bottom: 100px;
+    font-weight: bold;
     padding: 10px;
-    color: #666;
-    background: #DDD;
-    font: 24px/12px Helvetica,Arial,Verdana,sans-serif;
-    opacity: 0.7;
+    right: 1.618em;
+    margin-bottom: 0;
     outline: 0 none;
     text-decoration: none;
     text-shadow: 0 0 1px #DDD;
@@ -363,7 +362,14 @@ body>footer a:hover {color: #eee}
     -khtml-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
+    transition: all .3s ease;
+    text-align: center;
+    color: #666;
+    background: rgba(255, 255, 255, .5);
 }
+a.top.visible {font-size: 24px;}
+a.top:hover{background: rgba(200, 200, 200, .8);}
+
 #id-msg {color: rgb(202, 60, 60);}
 #tag-cloud .tag_meta {font-style: italic}
 

diff --git a/static/js/main.js b/static/js/main.js
@@ -50,11 +50,4 @@ function postAjax(url, data, success) {
 
     xhr.send(data);
     return xhr;
-}
-
-function scrollToTop() {
-    window.scrollTo({
-        top: 0,
-        behavior: "smooth"
-    });
 }
diff --git a/views/ybs/base.qtpl b/views/ybs/base.qtpl
@@ -63,19 +63,21 @@ Page prints a page implementing Page interface.
 <footer role="contentinfo">
     {%= p.Footer() %}
 </footer>
-<a style="display: none; " rel="nofollow" href="#top" id="go-to-top">▲</a>
+<a rel="nofollow" href="#top" class="top" id="go-to-top">▲</a>
 <script>
-document.addEventListener("scroll", handleScroll);
-let scrollToTopBtn = document.getElementById("go-to-top");
-scrollToTopBtn.addEventListener("click", scrollToTop);
-
-function handleScroll() {
-    if (document.documentElement.scrollTop > 300) {
-        scrollToTopBtn.style.display = "block";
-    } else if (document.documentElement.scrollTop < 300){
-        scrollToTopBtn.style.display = "none";
-    }
-}
+(function (window, document) {
+    let scrollToTopBtn = document.getElementById("go-to-top");
+    document.addEventListener("scroll", function () {
+        let top = window.scrollY || document.documentElement.scrollTop;
+        scrollToTopBtn.classList.toggle('visible', top > 1000);
+    });
+    scrollToTopBtn.addEventListener("click", function () {
+         window.scrollTo({
+             top: 0,
+             behavior: "smooth"
+         });
+    });
+})(this, this.document);
 </script>
 </body>
 </html>