jquery实现点击页⾯回到顶部
a)下⾯看看实现，实现很简单，通过JQ判断滚动条向下滚动的长度⼤于多少时显⽰【回到顶部+回到⾸页】的图标（换⼀种理解：
滚动条顶端距离页⾯顶部的距离），另外⼀种实现⽅法，就是通过锚标记，很好理解，就是标记⼀个位置，事件激活时，给我回到这个位置
b)JQ判断滚动条向下滚动的长度⼤于多少时，这个⽅法，也可以⽤来做页⾯的⾃动加载...就是你不停滚动，数据就不停加载...⽤户体验很好的喔【有时间就写】
1）⾸先我们写好DOM结构、写好CSS样式表
/* HTML */
<div >
<!--这个带ID的p标签，叫做锚标记，放在页⾯顶部位置，⽬的：防⽌代码不起作⽤时(⽐如类库版本浏览器不⽀持)，你点击回到顶部，仍然可以通过锚标记实现-->  <p id="pageTop"></p>
<section id="top_sec" class="top_sec">
<a href="#pageTop" id="goPageTop"></a>
<a href="#" id="goPageHome"></a>
</section>
</div>
/* CSS */
      .top_sec {
position: fixed;
bottom: 74px;
right: 12px;
width: 42px;
z-index: 999;
display: none;
}
#goPageTop {
width: 42px;
height: 42px;
margin-bottom: 10px;
border-radius: 50%;
background: url(img/go_top_icon.png) no-repeat 0 0;
background-size: 42px auto;
display: block;
}
#goPageHome {
width: 42px;
height: 42px;
position: relative;
border-radius: 50%;
background: url(img/go_home_icon.png) no-repeat 0 0;
background-size: 42px auto;
display: block;
}
2）来看看实现代码
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/* 回到顶部 */
$(function() {
$(function() {
$(window).scroll(function() {
/* 判断滚动条距离页⾯顶部的距离 100可以⾃定义*/
if($(window).scrollTop() > 100) {
$("#top_sec").fadeIn(100); /* 这⾥⽤.show()也可以只是效果太丑 */
} else {
$("#top_sec").fadeOut(100);
}
});
});jquery实现ajax
/* 给图⽚元素绑定回到顶部的事件 */
$(function() {
$("#goPageTop").on("click", function() {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
</script>
3）这是效果图
总结：⼀定注意是否引⽤了JQ类库。
以上就是本⽂的全部内容，希望对⼤家有所帮助，谢谢对的⽀持！