a标签实现返回顶部和跳转至评论框

 懿古今   2015-09-15 22:39:47 更新  技术文档

现在网上都有很多种方法实现返回顶部和跳转至评论框的方法，有简单的也有复杂的，今天我就分享本主题所使用的方法，个人认为是比较简单的。

<a>标签实现返回顶部和跳转至评论框_懿古今

首先，打开我们所使用的主题中的footer.php文件，在</footer>前面添加以下代码并保存。

  1. <div class="tools">
  2.     <a href="#" class="tools_top" title="返回顶部"></a>
  3.     <?php wp_reset_query(); if ( is_single() || is_page() ) { ?>
  4.         <a href="#respond" class="tools_comments" title="发表评论"></a>
  5.     <?php } else {?>
  6.         <a href="<?php bloginfo('url');?>/zxly#respond" class="tools_comments" title="给我留言"></a>
  7.     <?php } ?>
  8. </div>

第6行代码的意思就是如果不在页面或日志页就跳转到我们留言板的评论框中。

接着，打开我们所使用的主题中的style.css文件，加上以下代码保存即可。

  1. /*返回顶部、查看评论、转到底部*/
  2. .tools{ position:fixed; bottombottom:50px; rightright:20px; z-index:1000}
  3. .tools_comments,
  4. .tools_top{ display:block; height:32px; width:32px; background:url(image/top.gif) no-repeat; background-position:0 -64px;  margin-top:5px;}
  5. .tools_comments:hover{ background-position:0 -96px;}
  6. .tools_top{ background-position:0 0;}
  7. .tools_top:hover{ background-position:0 -32px}

其中，第2行代码就是定位的，如离右边和底部多远，可以自己调整；第4行代码中的background:url(image/top.gif)就是本主题所使用的返回顶部和跳转至评论框的背景图。

返回顶部和跳转至评论框的背景图

最后把刚才修改的这两个文件保存覆盖更新即可实现返回顶部和跳转至评论框。

本文地址：https://www.yigujin.cn/210.html

你可能感兴趣的文章

文章标签： ,  
版权声明：本文为原创文章，版权归 懿古今 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请发邮件至[email protected]，确认后马上更正、删除，谢谢！

发表评论

  1. 幻杀博客丨ihuan.me
    幻杀博客丨ihuan.me @回复
    发表于2015-03-05 10:30  沙发

    这个应该是最简洁的吧

  2. tui8.com免费独立博客
    tui8.com免费独立博客 @回复
    发表于2015-03-05 15:20  板凳

    换友情链接，多说回复或者任何文章留言即可qq 7 7 7 2 0 8 3（最好是发临时会话，好友太多了）http://tui8.com推把自媒体，提供免费独立域名博客

    • 懿古今
      懿古今2015-03-05 15:58  回复

      @tui8.com免费独立博客本站的友情链接都是友情第一，所以目前只跟来访密切的博客交换链接，所以暂时不交换链接，不好意思，祝元宵节快乐

  3. 热腾网
    热腾网 @回复
    发表于2015-03-05 16:32  地板

    这个方法是绝对简单的那种。 赞个。

    • 懿古今
      懿古今2015-03-06 08:55  回复

      @热腾网 谢谢夸奖，不过这个方法就是不能实现往下拖到一个位置才出现，这个是一直都出现的。

      • 热腾网
        热腾网2015-03-06 11:55  回复

        @懿古今使用js可以来实现吧。

        • 懿古今
          懿古今2015-03-06 13:40  回复

          @热腾网 我那个BOKE123就是用JS实现这个功能的，这个博客就用这个最简单的

  4. Me.稀奇
    Me.稀奇 @回复
    发表于2015-03-05 16:48  4楼

    ··· 可惜我连最简单的也不会·····

  5. 小孫
    小孫 @回复
    发表于2015-03-05 17:53  5楼

    好工具呀！ 关键是很美观！

  6. 咸菜一点米
    咸菜一点米 @回复
    发表于2015-03-05 19:55  6楼

    我管这叫“找ID”的方法，个人感觉还是平滑滚动的好一点。。。

    • 懿古今
      懿古今2015-03-06 08:57  回复

      @咸菜一点米平滑滚动确实好一些，不过青菜萝卜各有所爱吧

      • 咸菜一点米
        咸菜一点米2015-03-06 14:22  回复

        @懿古今你这讨论不开启邮件通知的呀

        • 懿古今
          懿古今2015-03-06 15:13  回复

          @咸菜一点米多说评论都有邮件通知的，除非评论的时候没有输入邮箱地址。不过有时候应该也会抽风的吧

        • 咸菜一点米
          咸菜一点米2015-03-06 18:36  回复

          @懿古今真没有邮件通知。以前倒是收到过。还想补一句：我博上也没放平滑滚动的东西，嘻嘻，其实我觉得也好不到哪儿去。

  7. 东
    东 @回复
    发表于2015-03-05 23:29  7楼

    以前觉得很难的东西，没想到居然这么简单。

    • 懿古今
      懿古今2015-03-06 08:57  回复

      @东 简单的方法就只能实现简单的功能，感觉够用就行

  8. 赚客笔记
    赚客笔记 @回复
    发表于2015-03-06 07:56  8楼

    再来学习一下

  9. 采蘑菇的大谋士
    采蘑菇的大谋士 @回复
    发表于2015-03-06 10:37  9楼

    这个方法正在使用，感觉不错，貌似之前折腾的很多主题都是这个方法实现的。

    • 懿古今
      懿古今2015-03-06 13:41  回复

      @采蘑菇的大谋士 我以前都是用JS实现的，这次折腾博客才发现有这么简单的，看来我比你们落后很多啊

      • 采蘑菇的大谋士
        采蘑菇的大谋士2015-03-06 13:47  回复

        @懿古今呵呵，JS容易出现不兼容的情况，所以就找了这个方法。

  10. an9
    an9 @回复
    发表于2015-03-06 12:38  10楼

    不错，简单实用。

  11. 中国历史
    中国历史 @回复
    发表于2015-03-06 15:11  11楼

    我缺回到评论框

    • 懿古今
      懿古今2015-03-06 15:14  回复

      @中国历史有了这个回到评论框的坏处就是不直接看完文章直接点击评论了

  12. 理财渠道
    理财渠道 @回复
    发表于2015-03-06 16:36  12楼

    这个方法简单多了。

  13. 李阳博客
    李阳博客 @回复
    发表于2015-03-06 23:00  13楼

    哈哈，我都懒得折腾！

    • 懿古今
      懿古今2015-03-08 00:22  回复

      @李阳博客我也是折腾主题的时候顺便弄上去的，没有这个功能感觉不太方便

  14. 小虎博客
    小虎博客 @回复
    发表于2015-03-07 00:34  14楼

    这段代码能不能在zblog asp版本使用？？

  15. 顾陌博客songker.com
    顾陌博客songker.com @回复
    发表于2015-03-07 09:38  15楼

    href=”#”跳转到 头部。href=”#评论ID”跳转到评论模块

  16. 圆月博客
    圆月博客 @回复
    发表于2015-03-07 11:44  16楼

    这个不错额

  17. imy
    imy @回复
    发表于2015-03-07 16:23  17楼

    不错哦，简单实用。不过我是懒得折腾了。

    • 懿古今
      懿古今2015-03-08 00:23  回复

      @imy有好过没有，博客在于折腾

  18. 奇
    奇 @回复
    发表于2015-03-08 11:08  18楼

    看看 学习了

  19. 森灭
    森灭 @回复
    发表于2015-03-08 11:46  19楼

    不用php应该也能实现

    • 懿古今
      懿古今2015-03-09 13:46  回复

      @森灭应该可以的吧，这个其实就是HTML和CSS

  20. 慢点博客
    慢点博客 @回复
    发表于2015-03-08 14:04  20楼

    再加一个到底部的箭头更好，你的留言是倒序的，看了你的文章，想看看别人留言的话，可以直接到底部开始。

    • 懿古今
      懿古今2015-03-09 13:46  回复

      @慢点博客本来是想加的，但是想想用到直达底部的太少了，就不弄了

      • 慢点博客
        慢点博客2015-03-09 22:11  回复

        @懿古今要是不影响页面加载速度的话，加一个也无妨，万一有访客会用到呢！

  21. LZY
    LZY @回复
    发表于2015-03-08 21:29  21楼

    这个功能在文章内容比较多的时候还是比较实用的！

    • 懿古今
      懿古今2015-03-09 13:47  回复

      @LZY还有就是当评论框在评论下方的时候，如果没有这个，有时候要拖动半天才看到评论框

  22. 小树技术博客
    小树技术博客 @回复
    发表于2015-03-08 22:20  22楼

    来回访啦，写得不错。

  23. 笑三笑
    笑三笑 @回复
    发表于2015-03-10 07:36  23楼

    收下，正寻找中