返回顶部

拼搏现实的明天。 2022-08-18 12:23 358阅读 0赞

点击返回顶部，简单易学

效果图：

![Center][]

第一步：将返回按钮fixed到具体位置后隐藏

第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐藏

第三步：点击滚动

代码：

<!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>返回顶部</title>
    		<meta name="Keywords" content="关键词,关键词">
    		<meta name="Description" content="">
    		
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			p{width:300px; height:200px;background:#ccc; margin:10px auto;}
    			.top{width:60px;height:50px;position:fixed;right:22px;bottom:100px;display:none;}
    			.top span{width:60px;height:50px;background:url("img/icon_top.png")no-repeat center #000;display:block;box-shadow:2px 4px 10px #ccc;border-radius:4px;cursor:pointer;}
    		</style>
    		<script type="text/javascript" src="js/jquery.js" ></script>
    	</head>
    	<body>
    		<p>1</p>
    		<p>2</p>
    		<p>3</p>
    		<p>4</p>
    		<p>5</p>
    		<p>6</p>
    		<p>7</p>
    		<div class = "top">
    			<span></span>
    		</div>
    		<script type = "text/javascript">
    			//返回顶部的小图标的现隐
    			$(window).scroll(function(){
    				if($(window).scrollTop() >= 100){
    					$(".top").fadeIn(600);
    				}else{
    					$(".top").stop(true,true).fadeOut(600);
    				}
    			});
    			//返回顶部
    			$(".top").click(function(){
    				$("html,body").animate({
    					scrollTop:0
    				},800);
    			});
    		</script>
    	</body>
    </html>

Jquery和箭头图片，请读者自己准备吧；或者换其他图片，比如火箭之类的。

转载请注明来源：[http://blog.csdn.net/qq\_19558705/article/details/49851879][http_blog.csdn.net_qq_19558705_article_details_49851879]

更多干货等你来拿 [http://www.itit123.cn/][http_www.itit123.cn]

[Center]: /images/20220731/90ce976aadc84a2bb9de06e4b9ac4720.png
[http_blog.csdn.net_qq_19558705_article_details_49851879]: http://blog.csdn.net/qq_19558705/article/details/49851879
[http_www.itit123.cn]: http://www.itit123.cn/