sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

滚动丝般顺滑

Browse Source
This commit is contained in:
结发受长生
2019-05-26 20:00:40 +08:00
parent 46f5556257
commit c30aed06c7
6 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/yilia/source-src/js/aside.js
+33 -31
View File
@@ -1,46 +1,48 @@
var backTop = function (domE, ctn, distance) {
if (!domE) return;
var timer = null;
var _onscroll = (ctn || window).onscroll,
_onclick = domE.onclick;
(ctn || window).onscroll = throttle(function () {
typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
toggleDomE();
}, 100);
domE.onclick = function () {
typeof _onclick === 'function' && _onclick.apply(this, arguments);
timer = setInterval(function () { //设置一个计时器
var ct = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离
var diff = Math.max(10, ct / 6);
ct -= diff;
if (ct > 0) {//如果与顶部的距离大于零
ctn.scrollTop = ctn.scrollTop - diff;
window.scrollTo(0, ct);//向上移动10px
} else {//如果距离小于等于零
ctn.scrollTop = 0;
window.scrollTo(0, 0);//移动到顶部
clearInterval(timer);//清除计时器
}
}, 10);//隔10ms执行一次前面的function，展现一种平滑滑动效果
};
if (!domE) return
var timer = null
var _onscroll = ctn.onscroll
ctn.onscroll = throttle(function () { // 滚动到一定高度才显示"回到顶部"按钮
typeof _onscroll === 'function' && _onscroll.apply(this, arguments)
toggleDomE()
}, 100)
if(!window.getComputedStyle || window.getComputedStyle(ctn).scrollBehavior === undefined) {
// 浏览器不支持scroll-behavior属性
domE.querySelector('a[href="#top"]').addEventListener('click', function (event) {
event.preventDefault()
timer = setInterval(function () { //设置一个计时器
var ct = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop //获取距离顶部的距离
var diff = Math.max(10, ct / 6)
ct -= diff
if (ct > 0) {//如果与顶部的距离大于零
ctn.scrollTop = ctn.scrollTop - diff
window.scrollTo(0, ct)//向上移动10px
} else {//如果距离小于等于零
ctn.scrollTop = 0
window.scrollTo(0, 0)//移动到顶部
clearInterval(timer)//清除计时器
}
}, 13)//隔13ms执行一次前面的function，展现一种平滑滑动效果
})
}
function toggleDomE() {
domE.style.display = (ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
domE.style.display = (ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop) > distance ? 'block' : 'none'
}
function throttle(func, wait) {
var timer = null;
var timer = null
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
var self = this, args = arguments
if (timer) clearTimeout(timer)
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
return typeof func === 'function' && func.apply(self, args)
}, wait)
}
}
};
function init() {
backTop(document.getElementById('js-jump-container'), document.getElementById('container'));
backTop(document.getElementById('js-jump-container'), document.getElementById('container'), 300)
}
export default { init }