为WordPress模版添加一个固定的滚屏按钮

WordPress3811.8K阅读模式

似乎很多人都喜欢弄一个固定的滚屏按钮,这个小功能可以方便读者阅读。其实我们使用的操作系统早已提供了这一功能,那就鼠标中键(滚轮),使用起来远比这个按钮方便,不过鼠标中键貌似都不是很抗用,另外,也为点缀一下博客,弄个固定的滚屏按钮也不错。

今天提供的滚屏代码与HotNews pro主题集成的滚屏按钮类似,只不过是固定在屏幕的边缘并具有鼠标悬停效果,下面以Wordpress默认主题Twenty Ten为例,开始折腾。

打开Twenty Ten主题的header.php模版文件,把以下代码

  1. <div id="scroll">
  2. <a class="scroll_t" title="Top" href="#header"></a>
  3. <?php if(is_single() || is_page()) { ?><a class="scroll_c" title="Comments" href="#comments"></a><?php } ?>
  4. <a class="scroll_b" title="Bottom" href="#footer"></a>
  5. </div>

添加到这句后面

  1. <div id="wrapper"class="hfeed">

也可添加到footer.php中。

再把下面的样式添加到style.css的最后面:

  1. /** 滚屏 **/
  2. #scroll {
  3. position:fixed;
  4. top:40%;
  5. right:0;
  6. width:24px;
  7. _position:absolute;
  8. _top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight * 0.4));
  9. }
  10. #scroll a {
  11. display:block;
  12. float:right;
  13. width:24px;
  14. height:24px;
  15. background:#fffurl(images/scroll.gif) no-repeat;
  16. }
  17. #scroll a:hover {
  18. background:#fffurl(images/scroll.gif) no-repeat;
  19. }
  20. #scroll a.scroll_t:hover {
  21. background-position:-24px 0;
  22. }
  23. #scroll a.scroll_c {
  24. background-position:0 -24px;
  25. }
  26. #scroll a.scroll_c:hover {
  27. background-position:-24px -24px;
  28. }
  29. #scroll a.scroll_b {
  30. background-position:0 -48px;
  31. }
  32. #scroll a.scroll_b:hover {
  33. background-position:-24px -48px;
  34. }
  35. html body {background-image:url(about:blank);background-attachment:fixed;}/** 防止IE6抖动 **/

最后把下面的图片扔到主题的images文件夹中,刷新页面试试按钮效果。

为WordPress模版添加一个固定的滚屏按钮

可能你会发现滚屏有些生硬,对了还缺少JS滑动特效。

下载:jquery.min.js,放到Twenty Ten主题根目录中,并在header.php模版:

  1. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

下面添加:

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/jquery.min.js" ></script>
  2. <script type="text/javascript">
  3. jQuery(document).ready(function($){
  4. $('.scroll_t').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
  5. $('.scroll_c').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
  6. $('.scroll_b').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
  7. });
  8. </script>

注:如果你的主题已加载了jquery.js,就不用重复加载jquery.min.js了。

最后,再刷新一下页面,这回效果应该出来了。点些查看效果演示

注:如果你的主题标签选择器不是#header、#comments和#footer可以对上面代码作相应的修改。

经常看见有的网友也弄了个滚屏按钮,大大的回旋箭头,JS特效晃晃悠悠,严重干扰阅读者的视线。

顺便再给大家提供一个双击滚屏代码:

  1. <script type="text/javascript">
  2. var currentpos,timer;
  3. function initialize()
  4. {
  5. timer=setInterval("scrollwindow()",10);
  6. }
  7. function sc(){
  8. clearInterval(timer);
  9. }
  10. function scrollwindow()
  11. {
  12. window.scrollBy(0,1);
  13. }
  14. document.onmousedown=sc
  15. document.ondblclick=initialize
  16. </script>

这段JS代码,可实现双击鼠标自动滚屏,单击停止,效果可以在此页面试试。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
评论  38  访客  31  作者  5
    • 莫也
      莫也 6

      这个还想和你2.4主题里面的差不多,我不太关心

      我关心的是 1. 你文章详细也的 大,中,小,返回 的插件

      2. 你的 支持,反对 插件

        • 知更鸟
          知更鸟

          @ 莫也 文字大小调节,没有任何技术,简单的Web应用
          插件ajax-comment-vote

            • 求索阁
              求索阁 5

              @ 知更鸟 知行兄,我在启用了你这款hotnews2.4主题后,首页无法正常显示,出错提示是 fatal error:。。。。domains/qiusuoge.com/public_html/wp-includes/load.php ;或者是fatal error:。。。。domains/qiusuoge.com/public_html/wp-includes/cache.php 咋处理呢?

                • 知更鸟
                  知更鸟

                  @ 求索阁 出现错误提示,一般都是插件冲突,禁用所有再试

                • Kael.Z
                  Kael.Z 7

                  @ 知更鸟 又一个插件…..

              • 飘无痕
                飘无痕 5

                学习了,鸟哥,无图的主题啥时候能出哦?期待很久了!

                  • 知更鸟
                    知更鸟

                    @ 飘无痕 无图版,基本遥遥无期
                    不过最近可能会升级目前的

                  • 上海妇科医院
                    上海妇科医院 0

                    WordPress功能强大,我刚开始使用,很多东西都不会,到你这来学习学习

                    • 八闽人才
                      八闽人才 0

                      过来讨教插件了

                      • 小滋味阅读志
                        小滋味阅读志 0

                        非常感谢楼主的分享。受益匪浅。

                        • 憨豆先生
                          憨豆先生 6

                          鸟哥,你可以帮忙做一个logo吗?
                          http://www.kepu8s.com/
                          “分享优质有趣的资源”

                          • 盛大推广号
                            盛大推广号 0

                            路过,来了解一下

                            • 唐朝影视
                              唐朝影视 0

                              这网站模板真的很漂亮啊,很有个性吗

                              • Event
                                Event 1

                                添加一個固定的滾屏按鈕,很實用,收藏了!

                                • chunlinsay
                                  chunlinsay 0

                                  博主提供的代码很有用,我借来用了,多谢!

                                  • 北京摄影工作室
                                    北京摄影工作室 1

                                    过来学习一下啊

                                    • 小孙博客
                                      小孙博客 2

                                      鸟哥。双击滚屏代码怎样控制滚屏的速度的?感觉有点快,可不可以调整慢点。。谢谢。。

                                      • 情歌
                                        情歌 2

                                        怎么添加了没用呢。。。应该没有错误的呀

                                        • Colorblind
                                          Colorblind 0

                                          为什么我用这个模板,可是最终的显示效果差了很多啊,求解。。。。。

                                          • YAO
                                            YAO 0

                                            双击滚动的效果看得有点头晕,晃动得太厉害了!字貌似也会发虚!

                                              • seoertony
                                                seoertony 4

                                                @ YAO 想问下,博主地底部的信息是怎么加上去的啊

                                              • 记忆枕
                                                记忆枕 1

                                                很好,很强大!

                                                • 狂笑的奶牛
                                                  狂笑的奶牛 0

                                                  很好,奶牛支持鸟哥

                                                  • 臣子木
                                                    臣子木 1

                                                    鸟哥 我的主题加上去后图片正好在文章边上 怎么改变它的位置啊

                                                    • 祥
                                                      0

                                                      我是个菜鸟,只能看着你们这些高手有代码就抄一下了,弄了一晚上就你这个我做成功了一半,问题还是有啊,我想问下鸟兄,为什么我完全按照你说的做,那个按扭会在左边而不象你的一样在右边啊?
                                                      还有一个就是中间的到评论的按扭点了没用,是不是代码有什么问题?

                                                        • colinjiang
                                                          colinjiang 0

                                                          @ 我也有相似问题耶,不过不加js好像评论可以用。

                                                        • 童志强
                                                          童志强 0

                                                          为什么我用了这个插件以后总是在左边出现呢,不明白啊,楼主在我的网站看看吧,顺便强烈要求共享最新的滚动,像你这样的滚动条哦~

                                                          • 孤风
                                                            孤风 1

                                                            鸟哥这里现在的滚屏效果怎么实现的,就是鼠标放上去会变大

                                                            • IT自习室
                                                              IT自习室 1

                                                              大前端D4主题,对这个好像无效,不知道怎么回事

                                                              • 老虎
                                                                老虎 6

                                                                求一个你的右边这样的滚屏按钮package……

                                                                • XFabs
                                                                  XFabs 1

                                                                  感觉这有点麻烦,但你你这样做很漂亮啊

                                                                匿名

                                                                发表评论

                                                                匿名网友
                                                                :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                                拖动滑块以完成验证