jQuery让页面返回顶部的功能怎样做的
导读：这篇文章主要给大家介绍“jQuery让页面返回顶部的功能怎样做的”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“jQuery让页面返回顶部的功能怎样做的”文章能对大家有所帮...
这篇文章主要给大家介绍“jQuery让页面返回顶部的功能怎样做的”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“jQuery让页面返回顶部的功能怎样做的”文章能对大家有所帮助。效果图：
实现代码：
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>
返回顶部/title>
style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
height: 2000px;
}
.gotop{
display: block;
width: 32px;
height: 32px;
background-color: red;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: white;
line-height: 32px;
position: fixed;
right:50px;
bottom:50px;
opacity: 0;
/*top: 500px;
*/
}
/style>
/head>
body>
div class="wrap">
a href="###" class="gotop">
TOP/a>
/div>
script type="text/javascript" src="jquery-1.11.3.min.js">
/script>
script type="text/javascript">
$(function(){
// 当滚动条滚动大于200时出现，未大于，消失
$(window).scroll(function(){
if($(document).scrollTop()200){
// alert("kk");
$(".gotop").stop().animate({
opacity: 0
}
,1000)
}
else{
$(".gotop").show().stop().animate({
opacity: 1
}
,1000)
}
}
)
// 返回顶部
$(".gotop").on("click",function(){
$("html body").animate({
scrollTop:0
}
,1000)
}
)
}
)
/script>
/body>
/html>
以上就是关于“jQuery让页面返回顶部的功能怎样做的”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： jQuery让页面返回顶部的功能怎样做的
本文地址： https://pptw.com/jishu/655132.html