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

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

以下划线的地方是错误的,我查了下实际上没有那么复杂,和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.希望帮到你了。

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


客服