jquery返回顶部功能
2020-01-31 本文已影响0人
一岁倾城
返回顶部功能，这个功能目前已经很普遍了，几乎每一个网站里都有这个功能，现在做一个笔记以便以后使用，希望帮助到你。
一、html代码块
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*返回顶部按钮的css样式*/
#top{
background: red;
color: #FFF;
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div>内容部分·····</div>
<div id="top">返回顶部</div>
</body>
</html>
二、js部分
<!--首先引入jquery-3.3.1.js-->
<script src="js/jquery-3.3.1.js"></script>
<!--其次在写方法-->
<script>
$(function(){
//这个是判断当前的滚动条到顶部的距离，在大于这个距离的时候显示，否则隐藏
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#top').fadeIn();
}else {
$('#top').fadeOut();
}
});
//点击id为按钮，并调用jquery封装好的animate方法设置scrollTop为零即可
$("#top").click(function(){
$("body,html").animate({scrollTop:0},1000)
return false;
})
});
</script>
