回到顶部代码
1.介绍及思路分析:
在很多公司的网站中,鼠标滚动一定高度(以150px为例)之后,会出现“返回顶部”的标签。
“返回顶部”标签被固定到窗口的指定位置,位置始终不变。
当滚动的距离高度小于指定高度后,该“返回顶部”的标签消失。
另外,“返回顶部标签”绑定点击事件,通过鼠标点击,实现文档回到顶部的效果。
2.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
height: 100px;
background: gray;
text-align: center;
font-size: 20px;
line-height: 100px;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.content {
width: 100%;
height: 1500px;
background: blueviolet;
text-align: center;
font-size: 20px;
padding-top: 100px;
}
.footer {
width: 100%;
height: 100px;
background: grey;
text-align: center;
font-size: 20px;
line-height: 100px;
}
.toTop {
width: 70px;
height: 70px;
border-radius: 50%;
background: greenyellow;
text-align: center;
line-height: 70px;
/*返回顶部标签固定定位*/
position: fixed;
right: 35px;
bottom: 35px;
z-index: 999;
font-size: 14px;
}
.toTop:hover {
background: green;
font-size: 16px;
cursor: pointer;
color: red;
}
</style>
</head>
<body>
<p class="wrAPPer">
<p class="header">顶部导航栏部分</p>
<p class="content">
<p>p.wrapper>(p.header+p.content+p.footer+p.toTop)快速生成代码</p>
<p>content部分的高度大于屏幕的高度,仅仅是为了出现滚动条而已。</p>
</p>
<p class="footer">底部</p>
<p class="toTop">回顶部</p>
</p>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 初始时,“返回顶部”标签隐藏
$(".toTop").hide();
$(window).scroll(function() {
// 若滚动的高度,超出指定的高度后,“返回顶部”的标签出现。
if($(document).scrollTop() >= 150) {
$(".toTop").show();
} else {
$(".toTop").hide();
}
})
// 绑定点击事件,实现返回顶部的效果
$(".toTop").click(function() {
$(document).scrollTop(0);
})
})
</script>
3.效果展示
一下分别为:滚动前、滚动后、点击“返回顶部”后的效果对比
相关阅读
document.getElementsByTagName()返回值
1. 常见问题 document.getElementsByTagName()返回值样式是[…,…,…],很多人误以为是数组,进而对它调用数组方法如sort(),但是这样
近期,因为项目需求,需要根据ip地址去确定位置,在网上查了很多的方法,最终都没有很理想的,还是花钱的接口得劲,可是毕竟会有不给钱就让实
prep = con.prepareStatement(foreignKeySql1+"000"); ResultSet rs = prep.executeQuery(); if(rs.next()){
Android Accept-Encoding为gzip,deflate Http请求返回
最近项目中遇到这样一个坑: 某一接口的HttpUrlConnection的请求返回结果为乱码,但PC浏览器直接打开是正常的。 效果图如下: 经过查
1. scanf 函数是有返回值的,它的返回值可以分成三种情况 1) 正整数,表示正确输入参数的个数。例如执行 scanf("%d %d", &a, &b)