前言
优化一键返回顶部
1.template
代码如下(示例):
</div>
<img class="footer none" id="gotoTop" @click="tops" src="../assets/img/返回顶部.jpg" alt>
</div>
2.script
代码如下(示例):
function gotoTop(minHeight) {
//距离为40是出现一键返回
minHeight ? (minHeight = minHeight) : (minHeight = 40);
// 为窗口的节流事件绑定处理函数
$(window).scroll(function() {
// 获取窗口的滚动条的垂直滚动距离
var s = $(window).scrollTop();
// 滚动一段距离,返回顶部渐现,否则渐隐
if (s > minHeight) {
//渐隐时间为0.5秒
$("#gotoTop").fadeIn(500);
} else {
$("#gotoTop").fadeOut(500);
}
});
}
gotoTop();
该处使用的url网络请求的数据。
3.methods
//一键返回缓慢 置顶
tops() {
//使得返回顶部过渡置增加交互效果
var timer = setInterval(
() =>
document.documentElement.scrollTop <= 0
? clearInterval(timer)
: window.scrollTo(0, document.documentElement.scrollTop - 10)//数值越大速度越快
);
},
4.destroyed
clearInterval(this.timer);
总结
一键返回 40px激活 0.5秒 缓慢出现 滚动回顶