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

发布时间:2020-05-05

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

今天提供的滚屏代码与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:-24px24px;
  28. }
  29. #scroll a.scroll_b {
  30. background-position:0 –48px;
  31. }
  32. #scroll a.scroll_b:hover {
  33. background-position:-24px48px;
  34. }
  35. html body {background-image:url(about:blank);background-attachment:fixed;}/** 防止IE6抖动 **/

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

为WordPress模版添加一个固定的滚屏按钮 1wordpress模版添加一个固定的滚屏按钮” />

可能你会发现滚屏有些生硬,对了还缺少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代码,可实现双击鼠标自动滚屏,单击停止,效果可以在此页面试试。

大熊wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。