mirrors/sakura
1
0
Fork 0
mirror of https://github.com/mashirozx/sakura.git synced 2024-11-22 14:58: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

75
js/sakura-app.js
View File

@ -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;
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');
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 ($(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");
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() > 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");
}
if ($(this).scrollTop() > offset_opacity) {
$back_to_top.addClass('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 () {

7
style.css
View File

@ -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;