WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就Jeff认为,加上这个会更加提升用户体验。本站将陆续发表几篇文章提供这几类“返回顶部、返回底部、评论”的添加方法(教程 ),今天提供的是在Jeff的阳台中使用的,效果如下:

你也可以到Jeff的阳台查看效果。

此“返回顶部、返回底部、评论”效果没有像本站使用的js滑动特效,但影响不大。如果你在意这个,你也可以等待后续文章更新。具体的黑色是通过css定义的,你可以改成你需要的颜色。

在此之前,请先下载这个gif图片,一般放在主题目录下的images文件夹,之后就开始我们的代码之旅吧!

教程进入ing

一、首先打开主题目录下的footer.php文件,在</body></html>代码之前添加如下的代码:

<div id="sticky-nav"><a class="gotop" onclick="window.scrollTo(0,0);return false;" href="#top"> <span>返回顶部</span></a> <?php if ( is_singular() && comments_open() ) { ?> <a class="gocom" onclick="document.getElementById('comment').focus();return false;" href="#respond"> <span>发表评论</span></a> <?php } ?> <a class="gobtm" onclick="window.scrollTo(0,document.body.scrollHeight);return false;" href="#colophon"> <span>前往底部</span></a></div>

二、再打开主题目录下的style.css文件,添加如下的代码:

article, .wp-pagenavi .current, #comment-nav-below .current{background:#fff url(images/bgb.gif) repeat-x 100% 100%; background:-webkit-linear-gradient(bottom,#eee 0%,#fff 40px); background:-moz-linear-gradient(bottom,#eee 0%,#fff 40px); background:-ms-linear-gradient(bottom,#eee 0%,#fff 40px); background:-o-linear-gradient(bottom,#eee 0%,#fff 40px); background:linear-gradient(bottom,#eee 0%,#fff 40px)}#sticky-nav{background:#000; -webkit-border-radius:3px 0 0 3px; -moz-border-radius:3px 0 0 3px; border-radius:3px 0 0 3px; position:fixed; right:0; top:41%; width:30px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.offsetHeight/2))} #sticky-nav a{background:url(images/sprite.gif) no-repeat; width:30px; height:30px; display:block; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; position:relative; color:#000; text-decoration:none; overflow:hidden}#sticky-nav span{background:#f7f7f7; border:1px solid #ccc; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; font-size:12px; position:absolute; left:-65px; top:4px; padding:2px 4px; -webkit-box-shadow:inset 0 0 1px #fff,0 0 1px rgba(0,0,0,.2); -moz-box-shadow:inset 0 0 1px #fff,0 0 1px rgba(0,0,0,.2); box-shadow:inset 0 0 1px #fff,0 0 1px rgba(0,0,0,.2); -webkit-transform:translate(10px,0); -webkit-transition:all .4s; -moz-transform:translate(10px,0); -moz-transition:all .4s; -ms-transform:translate(10px,0); -ms-transition:all .4s; -o-transform:translate(10px,0); -o-transition:all .4s; transform:translate(10px,0); transition:all .4s; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity =0)"; filter:alpha(opacity=0)} #sticky-nav a:hover{overflow:visible}#sticky-nav a:hover span{-webkit-transform:translate(0,0); -moz-transform:translate(0,0); -ms-transform:translate(0,0); -o-transform:translate(0,0); transform:translate(0,0); opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity =100)"; filter:alpha(opacity=100)}#sticky-nav span:before, #sticky-nav span:after{content:''; display:block; width:0; height:0; border:4px solid transparent; border-left-color:#fff; position:absolute; top:7px; right:-7px} #sticky-nav span:before{border-left-color:#ccc; right:-8px}#sticky-nav a.gotop{background-position:100% 0} #sticky-nav a.gobtm{background-position:100% 50%}#sticky-nav a.gocom{background-position:100% 100%}

最后保存刷新即可。

以上代码及gif图片来源于小影的ZiPE主题,特此感谢!

建议将下载的这个gif图片使用CSS sprite与其他图片合并,以减少http请求数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Alice

ios tableview 上加 textfiled

ios tableview 上加 textfiled  首先附上我项目中用曾经用到的几张图  并说明一下我的用法: 图1: ? 图2: ? 图3: ? 心在你我...

26150
来自专栏一“技”之长

iOS文本布局探讨之三——使用TextKit框架进行富文本布局

        关于图文混排,其实以前的博客已经讨论很多,在实际开发中,经常使用第三方的框架来完成排版的需求,其中RCLabel和RTLabel是两个比较好用的...

19020
来自专栏编程之旅

iOS开发——系统原生的二维码扫描

对于现在的App应用来说,扫描二维码这个功能是再正常不过的一个功能了,在早期开发这些功能的时候,大家或多或少的都接触过ZXing和ZBar这类的第三方库,但从i...

20230
来自专栏Dawnzhang的开发者手册

博客园博客排版(js样式实例)

昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,...

57830
来自专栏Rindew的iOS技术分享

iOS 图片渐进式下载

27340
来自专栏编程微刊

ztree实现左边动态生成树,右边为具体信息功能

88420
来自专栏落影的专栏

GPUImage详细解析(十)用GPUImage和指令配合合并视频

前言 GPUImage详细解析在GPUImage文集,在前文GPUImage详细解析(八)视频合并混音中使用了github上的开源方式实现,这篇使用GPUIma...

404100
来自专栏听雨堂

从MapX到MapXtreme2004[2]-图层操作

Mapx中基本的图层操作还是比较简单的,集中在对Layers和Layer的处理上,对别的没有太多要求。   在MapXtreme中,要完成类似功能,发生了一点...

23580
来自专栏韦弦的偶尔分享

Swift 统一导入三方库

此时在Swift中的宏定义那就只能找个文件直接let了,比如Const.swift之类的。

45520
来自专栏一“技”之长

iOS开发之AVKit框架使用 原

    在iOS开发框架中,AVKit是一个非常上层,偏应用的框架,它是基于AVFoundation的一层视图层封装。其中相关文件和类都十分简单,本篇博客主要整...

36020

扫码关注云+社区

领取腾讯云代金券