悬浮div设置回到顶部按钮

来源:互联网 发布:网络教育专科有用吗 编辑:程序博客网 时间:2024/04/29 14:00

样式:

<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>

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

效果图:


0 0
原创粉丝点击