mirrors/sakura
1
0
Fork 0
mirror of https://github.com/mashirozx/sakura.git synced 2024-11-22 23:08:14 +08:00
Code Issues Projects Releases Wiki Activity

refactor: cd_to_top and change_skin button

Browse Source 
back-to-top button function and mobile button animation
issue-199
This commit is contained in:
Spirit 2020-03-20 12:28:01 +08:00
parent 499d2c324e
commit 130c8802dd
2 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
js/sakura-app.js
View File

@ -417,22 +417,15 @@ $(document).ready(function () {
preBG(); preBG();
}); });
}); });
if (document.body.clientWidth <= 860) {
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() { function topFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { if ('scrollBehavior' in document.documentElement.style) {
addComment.I("moblieGoTop").style.display = "block"; window.scrollTo({
top: 0,
behavior: "smooth"
})
} else { } else {
addComment.I("moblieGoTop").style.display = "none"; window.scrollSmoothTo(0)
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
} }
} }
@ -1758,36 +1751,46 @@ var home = location.href,
document.body.addEventListener('input', POWERMODE) document.body.addEventListener('input', POWERMODE)
}, },
GT: function () { GT: function () {
var offset = 100, var cwidth = document.body.clientWidth,
offset_opacity = 1200, cheight = window.innerHeight,
scroll_top_duration = 700, pc_to_top = document.querySelector(".cd-top"),
$back_to_top = $('.cd-top'); mb_to_top = document.querySelector("#moblieGoTop"),
$(window).scroll(function () { changeskin = document.querySelector(".changeSkin-gear");
if ($(this).scrollTop() > offset) {
$back_to_top.addClass('cd-is-visible'); $(window).scroll(function() {
$(".changeSkin-gear").css("bottom", "0"); if (cwidth <= 860) {
if ($(window).height() > 950) { if ($(this).scrollTop() > 20) {
$(".cd-top.cd-is-visible").css("top", "0"); mb_to_top.style.display = "block";
} else { } else {
$(".cd-top.cd-is-visible").css("top", ($(window).height() - 950) + "px"); mb_to_top.style.display = "none";
} }
} else { } else {
$(".changeSkin-gear").css("bottom", "-999px"); if ($(this).scrollTop() > 100) {
$(".cd-top.cd-is-visible").css("top", "-900px"); pc_to_top.classList.add("cd-is-visible");
$back_to_top.removeClass('cd-is-visible cd-fade-out'); 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");
} }
if ($(this).scrollTop() > offset_opacity) {
$back_to_top.addClass('cd-fade-out');
} }
}); });
//smooth scroll to top //smooth scroll to top
$back_to_top.on('click', function (event) { mb_to_top.onclick = function() {
event.preventDefault(); topFunction();
$('body,html').animate({ }
scrollTop: 0, pc_to_top.onclick = function() {
}, scroll_top_duration); topFunction();
return false; }
});
} }
} }
$(function () { $(function () {

7
style.css
View File

@ -1870,7 +1870,6 @@ h1.page-title.mb- {
} }
#moblieGoTop { #moblieGoTop {
display: none;
position: fixed; position: fixed;
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
@ -1884,9 +1883,9 @@ h1.page-title.mb- {
border-radius: 10px; border-radius: 10px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24); 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 { #moblieGoTop:hover {
background-color: #fff; background-color: #fff;
opacity: .8 opacity: .8
@ -4260,7 +4259,7 @@ i.iconfont.js-toggle-search.iconsearch {
.s-search input { .s-search input {
font-size: 1rem; font-size: 1rem;
background: #none; background: none;
padding: 12px 24px 12px 64px; padding: 12px 24px 12px 64px;
width: 100%; width: 100%;
outline: 0; outline: 0;