站长资源
全栈工程师站点

实例分析之页面向下滚动显示返回顶部效果

网站页面太长,用户想返回到顶部会比较困难,现在大部分网站都会出现一个返回顶部的按钮来方便用户,当然我们可以利用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>

是不是很简单,其实很多复杂的效果都是由简单的东西堆砌而成,我们打好基础后就可以举一反三,站长资源网将带你从小的实例开始,一步步教你成为一名全栈工程师

本文由站长资源原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 实例分析之页面向下滚动显示返回顶部效果

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 实例分析之页面向下滚动显示返回顶部效果

评论 抢沙发

评论前必须登录!