涂涂研版

  1. 涂涂研版首页
  2. 教程、积累

添加简单的TOP向上按钮 for zblog php

雨夜 • • 教程、积累

以下划线的地方是错误的，我查了下实际上没有那么复杂，和jquery没关系，谢谢zblog的大侠沉冰浮水。大家只看不划线部分就行了。关于jQuery实现方法是在下一篇文章中展现，欢迎大家的浏览。（点击直达）呵呵。

想必大家查看本片文章的时候就会发现本站右下角有个top的向上按钮，实现方法通过jquery实现的。很简单，实现步骤如下：

1.在<head></head>之间添加

<script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/jquery.js"></script>

2.在网上下载jquery.js放在该主题的对应主题的script脚本文件夹里。

3.在主题的适当位置添加如下代码：

 <div id="right-box"><a href="#top">Top</a></div>

ps：上面的<a></a>之间的是最主要的，别的自己根据需要修改。

4.到css文件里添加适当的样式。这个根据自己的需求来。呵呵。本站的样式代码如下：

#right-box {
width: 40px;
height: 40px;
line-height:40px;
text-align:center;
position: fixed;
bottom: 120px;
right: 15px;
border: 1px solid #e5e5e5;
z-index:9999;
}
#right-box a{color:#fefefe;}

5.到这一步一般的主题基本就结束了，但是由于本站有一部分涉及到响应式主题，所以需要添加点东西。

要求：屏幕小于1000px的，top外面的边框不显示，背景色改变。代码：

@media (max-width: 1000px) {
 
  #right-box {
  border:none;background:#2c3e50;
 }

}

6.放个小图纪念一下，防止以后又要折腾了。呵呵。

6666222.JPG

7.希望帮到你了。

赞 (0)
打赏 微信扫一扫 微信扫一扫
雨夜雨夜认证作者
48744

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请通知我们，一经查实，本站将立刻删除。


客服