You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.5 KiB
50 lines
1.5 KiB
/*
|
|
固定导航，回到顶部
|
|
*/
|
|
var scrollTop = document.getElementById('scrollTop');
|
|
var navBar = document.getElementById('navBar');
|
|
var returnTop = document.getElementById('returnTop');
|
|
var mian = document.getElementById('mian');
|
|
|
|
window.onscroll = function() {
|
|
console.log(scrollTop.offsetHeight);
|
|
console.log(scroll().top);
|
|
if (scroll().top > scrollTop.offsetHeight) {
|
|
navBar.className = "objfixed";
|
|
//navBar变为固定定位后 脱离标准流 不在占位置，后面的就跳上来了。
|
|
//防止后面内容跳上来 给后面加pading margin
|
|
mian.style.paddingTop = navBar.offsetHeight + "px";
|
|
} else {
|
|
navBar.className = "";
|
|
mian.style.paddingTop = 0;
|
|
}
|
|
|
|
if (scroll().top > 1000) {
|
|
returnTop.style.display = "block";
|
|
} else {
|
|
returnTop.style.display = "none";
|
|
}
|
|
}
|
|
|
|
returnTop.onclick = function() {
|
|
var timer = null;
|
|
var step = Math.ceil(scroll().top / 60);
|
|
var leader = scroll().top;
|
|
clearInterval(timer); //防止重复设置定时器
|
|
timer = setInterval(() => {
|
|
var target = 0;
|
|
if (leader > target) {
|
|
leader = leader - step;
|
|
document.body.scrollTop = document.documentElement.scrollTop = leader;
|
|
} else {
|
|
clearInterval(timer);
|
|
}
|
|
}, 15) //每秒钟60贞会形成比较细腻的动画效果
|
|
}
|
|
|
|
function scroll() {
|
|
return {
|
|
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
|
|
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
|
|
}
|
|
}
|
|
|