From 130c8802dd7c881e5e4239ab226bc2feb6169d4a Mon Sep 17 00:00:00 2001
From: Spirit <spirit1431007@gmail.com>
Date: Fri, 20 Mar 2020 12:28:01 +0800
Subject: [PATCH] refactor: cd_to_top and change_skin button back-to-top button
 function and mobile button animation issue-199

---
 js/sakura-app.js | 81 +++++++++++++++++++++++++-----------------------
 style.css        |  7 ++---
 2 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/js/sakura-app.js b/js/sakura-app.js
index 32abbaa..9c2cc6d 100644
--- a/js/sakura-app.js
+++ b/js/sakura-app.js
@@ -417,22 +417,15 @@ $(document).ready(function () {
         preBG();
     });
 });
-if (document.body.clientWidth <= 860) {
-    window.onscroll = function () {
-        scrollFunction()
-    };
 
-    function scrollFunction() {
-        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-            addComment.I("moblieGoTop").style.display = "block";
-        } else {
-            addComment.I("moblieGoTop").style.display = "none";
-        }
-    }
-
-    function topFunction() {
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
+function topFunction() {
+    if ('scrollBehavior' in document.documentElement.style) {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        })
+    } else {
+        window.scrollSmoothTo(0)
     }
 }
 
@@ -1758,36 +1751,46 @@ var home = location.href,
             document.body.addEventListener('input', POWERMODE)
         },
         GT: function () {
-            var offset = 100,
-                offset_opacity = 1200,
-                scroll_top_duration = 700,
-                $back_to_top = $('.cd-top');
-            $(window).scroll(function () {
-                if ($(this).scrollTop() > offset) {
-                    $back_to_top.addClass('cd-is-visible');
-                    $(".changeSkin-gear").css("bottom", "0");
-                    if ($(window).height() > 950) {
-                        $(".cd-top.cd-is-visible").css("top", "0");
+            var cwidth = document.body.clientWidth,
+                cheight = window.innerHeight,
+                pc_to_top = document.querySelector(".cd-top"),
+                mb_to_top = document.querySelector("#moblieGoTop"),
+                changeskin = document.querySelector(".changeSkin-gear");
+
+            $(window).scroll(function() {
+                if (cwidth <= 860) {
+                    if ($(this).scrollTop() > 20) {
+                        mb_to_top.style.display = "block";
                     } else {
-                        $(".cd-top.cd-is-visible").css("top", ($(window).height() - 950) + "px");
+                        mb_to_top.style.display = "none";
                     }
                 } else {
-                    $(".changeSkin-gear").css("bottom", "-999px");
-                    $(".cd-top.cd-is-visible").css("top", "-900px");
-                    $back_to_top.removeClass('cd-is-visible cd-fade-out');
-                }
-                if ($(this).scrollTop() > offset_opacity) {
-                    $back_to_top.addClass('cd-fade-out');
+                    if ($(this).scrollTop() > 100) {
+                        pc_to_top.classList.add("cd-is-visible");
+                        changeskin.style.bottom = "0";
+                        if (cheight > 950) {
+                            pc_to_top.style.top = "0";
+                        } else {
+                            pc_to_top.style.top = cheight - 950 + "px";
+                        }
+                    } else {
+                        changeskin.style.bottom = "-999px";
+                        pc_to_top.style.top = "-999px";
+                        pc_to_top.classList.remove("cd-fade-out", "cd-is-visible");
+                    }
+                    if ($(this).scrollTop() > 1200) {
+                        pc_to_top.classList.add("cd-fade-out");
+                    }
                 }
             });
+
             //smooth scroll to top
-            $back_to_top.on('click', function (event) {
-                event.preventDefault();
-                $('body,html').animate({
-                    scrollTop: 0,
-                }, scroll_top_duration);
-                return false;
-            });
+            mb_to_top.onclick = function() {
+                topFunction();
+            }
+            pc_to_top.onclick = function() {
+                topFunction();
+            }
         }
     }
 $(function () {
diff --git a/style.css b/style.css
index c80cb53..8c121db 100644
--- a/style.css
+++ b/style.css
@@ -1870,7 +1870,6 @@ h1.page-title.mb- {
 }
 
 #moblieGoTop {
-    display: none;
     position: fixed;
     bottom: 10px;
     right: 10px;
@@ -1884,9 +1883,9 @@ h1.page-title.mb- {
     border-radius: 10px;
     border-radius: 12px;
     box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
-    transition: box-shadow .2s ease
+    transform: scale(0);
+    transition:transform .3s
 }
-
 #moblieGoTop:hover {
     background-color: #fff;
     opacity: .8
@@ -4260,7 +4259,7 @@ i.iconfont.js-toggle-search.iconsearch {
 
 .s-search input {
     font-size: 1rem;
-    background: #none;
+    background: none;
     padding: 12px 24px 12px 64px;
     width: 100%;
     outline: 0;