本文主要是介绍jquery实现当页面滚动超过一屏时显示返回顶部按钮,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>jquery实现当页面滚动超过一屏时显示返回顶部按钮</title>
<style>#go_top{position:fixed; LEFT: 85%;bottom:50px;}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){$("#go_top").hide();$(function () {//检测屏幕高度var height=$(window).height();//scroll() 方法为滚动事件$(window).scroll(function(){if ($(window).scrollTop()>height){$("#go_top").fadeIn(500);}else{$("#go_top").fadeOut(500);}});$("#go_top").click(function(){$('body,html').animate({scrollTop:0},100);return false;});});
});
</script>
</head>
<body>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
<div id="go_top"><img src="./img/top.png"/ alt="回到顶部图片">
</div>
</body>
</html>
这篇关于jquery实现当页面滚动超过一屏时显示返回顶部按钮的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!