实现 “返回顶部”功能

最新推荐文章于 2023-11-12 19:12:34 发布

漫画爱好者

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量250

点赞数

分类专栏：编程文章标签： JavaScript jQuery HTML

本文链接：https://blog.csdn.net/kinggaiwusi/article/details/80160698

版权

编程专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset='utf-8'>  
    <title>js2</title> 
    <style>
    	.returnTop{
    		position:fixed;
    		width:50;
    		height:60px;
    		right:20px;
    		bottom:20px;
    		background-color:red;
    		color:white;
    	}
    	.hide{
    		display:none;
    	}
    </style> 
<body>
	<div id='return_top' class='returnTop hide' οnclick='Go();'>返回顶部</div>
	<div style='height:3000px;'></div>
	<script src='js/jquery-1.8.2.js'></script>
	<script src='js/oldboy.js'></script>
	<script type='text/javascript'>   
		$(windw).scroll(function(){
			var height = $(window).scrollTop();
			if(height > 0){
				$('#return_top').removeClass('hide')
			}	
			else{
				$('return_top').addClass('hide')
			}
			});
			function Go(){
				$(window).scrollTop(0);
			}
	</script>
</body>  
</head>  
</html>  



==================方法2====================
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset='utf-8'>  
    <title>js2</title> 
    <style>
    	.returnTop{
    		position:fixed;
    		width:50;
    		height:60px;
    		right:20px;
    		bottom:20px;
    		background-color:red;
    		color:white;
    	}
    	.hide{
    		display:none;
    	}
    </style> 
<body>
	<div id='return_top' class='returnTop hide'>返回顶部</div>
	<div style='height:3000px;'>asd</div>
	<script src='js/jquery-1.8.2.js'></script>
	<script src='js/oldboy.js'></script>
	<script type='text/javascript'> 
		$(function(){
			$('#return_top').click(function(){
				$(window).scrollTop(0);
			})
		})  
		$(windw).scroll(function(){
			var height = $(window).scrollTop();
			if(height > 0){
				$('#return_top').removeClass('hide')
			}	
			else{
				$('return_top').addClass('hide')
			}
			});
	</script>
</body>  
</head>  
</html>

漫画爱好者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现 “返回顶部”功能

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset='utf-8'&gt; &lt;title&gt;js2&lt;/title&gt; &lt;style&gt; .returnTop{ position:fixed; width:50;
复制链接

扫一扫

专栏目录