回到顶部按钮代码,JS代码库,德仔网

代码语言

代码分类

【JS】回到顶部按钮

作者:技术geek / 发布于2015/6/10/ 773


	<!DOCTYPE html>
	<html lang="en">
	<head>
	 <meta charset="UTF-8">
	 <title>Scroll To Top</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<style>
	 .backtop {
	 background: url(http://www.w3cschool.cc/wp-content/themes/w3cschool.cc/assets/img/backtotop.png) no-repeat center center;
	 bottom: 20px;
	 cursor: pointer;
	 display: none;
	 height: 70px;
	 position: fixed;
	 right: 20px;
	 text-indent: -9999px;
	 width: 70px;
	 z-index: 100;
	 }
	</style>
	</head>
	<body style="height:5000px;">
	 <a class="backtop" href="javascript:void" style="display: none;"></a>
	<script>
	 var h = $(window).height();
	
	 $(window).scroll(function () {
	 if($(window).scrollTop()>=h*3) {
	 $(".backtop").fadeIn();
	 }else {
	 $(".backtop").fadeOut();
	 }
	 });
	 $(".backtop").click(function(event){
	 $('html,body').animate({scrollTop:0}, 500);
	 return false;
	 });
	</script>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　回到顶部　

同语言下

可能有用的

技术geek贡献的其它代码(4)