• 欢迎访问《源码家园》,本站可以通过Ctrl+F搜索标签搜索你自己的问题,欢迎加入源码家园: QQ群
  • 请勿直接引用本站的图片链接,否则你的文章图片失效勿怪!
  • 博客看到的二维码食用方法:打开手机QQ的右上角那个+的“扫一扫”,扫一下这个二维码就好了,也可以用别的扫描二维码工具直接扫描!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧!

网页右下角悬浮div设置回到顶部按钮

网站源码 小白 1年前 (2017-04-29) 1529次浏览 已收录 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>

代码房子网页底部文件比如:“home_foot.html”就好了!

效果图:

网页右下角悬浮 div 设置回到顶部按钮

样式文字颜色可以自己修改:

网页右下角悬浮 div 设置回到顶部按钮

演示看右下角:点我飞机过去

.


源码家园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明网页右下角悬浮 div 设置回到顶部按钮
喜欢 (0)
[2517723188@qq.com]
分享 (0)
小白
关于作者:
本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、Javascr ipt、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、python、Objective-C、Actionscr ipt、Pascal等单词的拼写,熟悉Windows、Linux、Mac、Android、IOS、WP8等系统的开关机!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址