在上一篇点击返回顶部的按钮上新加了部分功能
-
按钮不再是在页面底部出现,按钮是fixed定位在距离页面底部一段距离的靠左或者靠右的地方
.ClickTop{ display: none; color:white; padding: 5px 8px; border-radius: 10px; background: purple; position:fixed; left: 20px; bottom: 50px; z-index:3; cursor: pointer; }
2.可视区域第一屏的时候,是没有按钮的,当页面向上滚动一定距离后,按钮才出现的。-
网页开始滚动后添加事件
window.onscroll = scroll; function scroll(){ }
-
滚动距离>窗口可视区域的1/2
var ScrollLength = $(document).scrollTop(); //获取滚动距离
var ViewHeight = $(window).height(); //获取可视区域的高度
-
3.拼起来最终的js
var Btn = $('.ClickTop');
Btn.click(function(){
$('html,body').animate({
scrollTop: 0 }, 500);
})
window.onscroll = scroll;
function scroll(){
var ScrollLength = $(document).scrollTop();
var ViewHeight = $(window).height();
//这样获取的是窗口可视区域的大小,如果改成body获取的是body的高度
console.log('页面开始滚动');
console.log(ViewHeight);
console.log(ScrollLength);
// 判断滚动距离 超过0.5倍可视区域的高度
if (ScrollLength > ViewHeight/2) {
Btn.show();
} else {
Btn.hide();
}
}
https://codepen.io/littlelittlepig/pen/xBgoYN 更多代码,请移步demo
简洁版的点击返回顶部效果,欢迎大家点评指正