悬浮div设置回到顶部按钮

最新推荐文章于 2021-07-29 15:30:36 发布

一个猴子请来的救兵

最新推荐文章于 2021-07-29 15:30:36 发布

阅读量6.5k

点赞数 5

分类专栏：前端文章标签：悬浮div设置回到顶部按钮悬浮div 回到顶部 html jsp

本文链接：https://blog.csdn.net/sinat_28505133/article/details/56486985

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

样式：

<style type="text/css">  
.btns{font-weight: bold;display: inline-block;width: 80px;height: 27px;border: #5fb878;background: #5fb878;font-size: 1.4em;text-align: center;padding-top: 5px;color: white;}
a:hover{color:#FFFFFF}
</style>

主要代码：

<div style="overflow: hidden;position: fixed;right: 10px;bottom: 20px;z-index: 10;">
	    <div style="overflow: hidden;">
	    	<div style="padding-right:50px;">
	    		<a id="js_print" class="btns">打印</a>
			</div>
	    	<div style="padding-top:20px;padding-right:50px;">
				<a href="list.jhtml" class="btns">返回</a>
			</div>
	    	<div style="padding-top:20px;padding-right:50px;padding-bottom:50px">
				<a href="#" style="float: right;" class="btns">回到顶部</a>
			</div>
	    </div>
    </div>

基本上是拿来就可以用，确保你的页面足够长。

效果图：