欢迎访问,本站接受互联网网站仿站、功能定制、定制插件、主题,如果需要的话可以联系我 QQ:2283276927

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

雨夜 3030次浏览 4个评论

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


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
发表我的评论换个身份
取消评论
表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4) 个小伙伴在吐槽
  1. 等有空的时候,我也弄个玩玩。
    他她服装搭配 2014-09-12 AM 06:59 回复
    • 不过我现在主题用的却不是这个,直接调用的js函数,呵呵。
      雨夜 2014-09-12 PM 08:11 回复
  2. 支持一下~~似乎這個回到頂部沒有動畫效果?
    超級efly 2014-08-03 AM 11:38 回复
    • 没有做当然没有。呵呵
      雨夜 2014-08-03 PM 05:54 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们