如何使用html实现返回文章顶部效果

发布时间:2021-10-21 11:01:33 作者:小新
来源:亿速云 阅读:192

这篇文章给大家分享的是有关如何使用html实现返回文章顶部效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<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 >
		大家来到这里是看返回顶部的实现方式吧<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>

打开浏览器,查看效果如图:

如何使用html实现返回文章顶部效果

感谢各位的阅读!关于“如何使用html实现返回文章顶部效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. jquery 实现返回顶部功能
  2. jquery返回顶部效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:LARAVEL AJAX简单跨域的示例分析

下一篇:Disruptor中锁对性能有什么影响

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》