在页面中，当滚动条下滑到一定位置时就会出现返回顶部的图标，点击图标后页面平缓的回到顶部位置。到了顶部，这个图标又会消失。
这个功能可以用jQuery来实现。
首先要明确核心的知识点：
scroll():当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scrollTop():获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。
在<body>中写一个返回顶端的小标志
<a href="javaScript:;" class="top">TOP</a>
为它添加css样式
<style type="text/css">
.top {
width: 50px;
height: 37px;
background: skyblue;
cursor: pointer;
color: white;
text-align: center;
padding-top: 13px;
position: fixed;
right: 100px;
bottom: 50px;
display: none;
}
.top:hover {
background: yellowgreen;
}
a{
text-decoration: none;
}
</style>
现在开始写jQuery的代码，先引入jQuery的包，一定要放在代码前哦~
<script src="./js/jquery.min.js"></script>
正式开始
<script>
//为了显示效果，先利用for循环多输出一些内容
for (var i = 0; i < 100; i++) {
document.write("<h1>" + i + "</h1>");
}
$(function() {
//返回顶部===>出现与消失
//当屏幕滚动，触生 scroll 事件
$(window).scroll(function() {
var top1 = $(this).scrollTop(); //获取相对滚动条顶部的偏移
if (top1>200) { //当偏移大于200px时让图标淡入（css设置为隐藏）
$(".top").stop().fadeIn();
}else{
//当偏移小于200px时让图标淡出
$(".top").stop().fadeOut();
}
});
//去往顶部
$(".top").click(function(){
$("body , html").animate({scrollTop:0},300); //300是所用时间
});
});
</script>
在执行返回顶部操作时，chrome浏览器等-webkit内核都是支持body的，IE及Firefox就不好使了，所以要加上一个html就可以了。
返回顶部
网友评论