站长资源网站页面太长，用户想返回到顶部会比较困难，现在大部分网站都会出现一个返回顶部的按钮来方便用户，当然我们可以利用href=”#”空锚点特性实现，不过这样又过于生硬，一般都是配合少许动画看起来才不会那么不生硬。
首先我们写好简单的html结构
<div class="height"><!-- 填充高度 --></div>
<div class="top">
返回顶部
</div>
我们想想，在用户进来的第一屏页面是不需要出现返回顶部按钮的，因此需要添加css隐藏属性，我们给上面结构添加css代码如下：
.height {
height:2000px;
}
.top {
position:fixed;
right:0;
bottom:30%;
line-height:50px;
text-align:center;
cursor:pointer;
width:100px;
height:50px;
display:none;
background-color:#333;
color: #fff;
}
下面我们就可以开始我们的JS逻辑部分处理
第一步
先要监听浏览器的滚动事件，再滚动到一定的距离后我们出现返回顶部按钮，即display:block;
//监听滚动
$(window).scroll(function() {
//浏览器的滚动距离
var top = $(window).scrollTop();
//如果距离大于300则显示，否则就隐藏
top > 300 ? $('.top').fadeIn() : $('.top').fadeOut();
});
第二步
然后就是我们的点击返回顶部事件，点击后让其距离顶部为0
$(".top").click(function() {
$("html,body").animate({
scrollTop: 0
}, 500);
});
如此就完成了一个返回顶部效果的实现，这里我们主要用的jquery函数有:
scroll()//滚动监听 animate()//动画
附上完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例分析之页面向下滚动显示返回顶部效果</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
.height {
height:2000px;
}
.top {
position:fixed;
right:0;
bottom:30%;
line-height:50px;
text-align:center;
cursor:pointer;
width:100px;
height:50px;
display:none;
background-color:#333;
color: #fff;
}
</style>
</head>
<body>
<div class="height"><!-- 填充高度 --></div>
<div class="top">
返回顶部
</div>
<script>
$(function() {
$(window).scroll(function() {
var top = $(window).scrollTop();
top > 300 ? $('.top').fadeIn(600) : $('.top').fadeOut(600);
});
$(".top").click(function() {
$("html,body").animate({
scrollTop: 0
}, 500);
});
});
</script>
</body>
</html>
是不是很简单，其实很多复杂的效果都是由简单的东西堆砌而成，我们打好基础后就可以举一反三，站长资源网将带你从小的实例开始，一步步教你成为一名全栈工程师
本文由站长资源原创首发，转载请注明出处
评论前必须登录！
注册