返回文章頂部的實現

時間 2020-03-31

標籤返回文章頂部實現简体版

原文原文鏈接

<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery</title>
	</head> 
	<body> 
		<style>
		#goTopBtn {
			position: fixed;
			right:100px;
			bottom:100px;
			line-height:36px;
			width:49px;
			bottom:35px;
			height:46px;
			cursor:pointer;
			display:none; 
			background-p_w_picpath:url(go-top.png)
		} 
		</style> 
		<br/> 
		<p style="text-align:center;font-family:Georgia, 'Times New Roman', Times, serif;font-size:24px;font-weight:bold;">
		你們來到這裏是看返回頂部的實現方式吧<br/>
		下面就給你們呈現<br/>
		你們滾動鼠標<br/>
		屏幕的右側下方就會出現一個箭頭按鈕<br/>
		點擊該按鈕，就能夠實現返回頂部啦！<br/>
		<br/>喜歡的親們記得點贊哦~
		<br/>小編會繼續給你們帶福利的！ <br/>
		須要的js文件、圖片按鈕請從附件中下載<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
		<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
		<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
		<div id="goTopBtn">
		</div> 
		<script type="text/javascript" src="jquery1.3.2.js"></script> 
		<script type="text/javascript">  
			$(window).scroll(function(){
				var sc=$(window).scrollTop();
				var rwidth=$(window).width()  
				if(sc>0){    
					$("#goTopBtn").css("display","block");   
					$("#goTopBtn").css("left",(rwidth-46)+"px") 
					}else{  
					$("#goTopBtn").css("display","none");   
					}  
				})  
				$("#goTopBtn").click(function(){   
					var sc=$(window).scrollTop();    
					$('body,html').animate({scrollTop:0},500); 
					}) 
		</script> 
	</body> 
</html>

打開瀏覽器，查看效果如圖：javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。