refactor: cd_to_top and change_skin button
back-to-top button function and mobile button animation issue-199
This commit is contained in:
parent
499d2c324e
commit
130c8802dd
|
@ -417,22 +417,15 @@ $(document).ready(function () {
|
||||||
preBG();
|
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() {
|
function topFunction() {
|
||||||
document.body.scrollTop = 0;
|
if ('scrollBehavior' in document.documentElement.style) {
|
||||||
document.documentElement.scrollTop = 0;
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: "smooth"
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
window.scrollSmoothTo(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"),
|
||||||
|
changeskin = document.querySelector(".changeSkin-gear");
|
||||||
|
|
||||||
$(window).scroll(function() {
|
$(window).scroll(function() {
|
||||||
if ($(this).scrollTop() > offset) {
|
if (cwidth <= 860) {
|
||||||
$back_to_top.addClass('cd-is-visible');
|
if ($(this).scrollTop() > 20) {
|
||||||
$(".changeSkin-gear").css("bottom", "0");
|
mb_to_top.style.display = "block";
|
||||||
if ($(window).height() > 950) {
|
|
||||||
$(".cd-top.cd-is-visible").css("top", "0");
|
|
||||||
} 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 () {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue