跳转至内容
  • 最新
  • 版块
  • 标签
  • 热门
  • 用户
  • 群组
  • 太微中文教程
  • 新插件投票看板
皮肤
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • 默认(不使用皮肤)
  • 不使用皮肤
折叠
太微中文论坛icon

太微中文论坛

  1. 首页信息流
  2. 版块
  3. 讨论
  4. 在每个条目底部添加回到顶部按钮,优化长文浏览体验

在每个条目底部添加回到顶部按钮,优化长文浏览体验

已定时 已固定 已锁定 已移动 讨论
5 帖子 3 发布者 109 浏览
  • 从旧到新
  • 从新到旧
  • 最多赞同
登录后回复
此主题已被删除。只有拥有主题管理权限的用户可以查看。
  • dyp1121054136D 离线
    dyp1121054136D 离线
    dyp1121054136
    写于 最后由 编辑
    #1

    新建条目加tag:$:/tags/ViewTemplate

    添加代码

    <$link to=<<currentTiddler>> tooltip="回到顶部">▲</$link>
    

    默认为左对齐,想要靠右对齐,可添加float代码

    <div style="float:right">
    <$link to=<<currentTiddler>> tooltip="回到顶部">▲</$link>
    </div>
    

    按钮符号可以换成其他符号或图片

    pjP 1 条回复 最后回复
    0
    • pjP 离线
      pjP 离线
      pj
      在 中回复了 dyp1121054136 最后由 编辑
      #2

      @dyp1121054136

      添加完标题到底部去了,并且没有出现回到顶部按钮

      11cb8ff2-bce6-4af4-bd25-4c8faf3c1490-image.png

      pjP 1 条回复 最后回复
      0
      • pjP 离线
        pjP 离线
        pj
        在 中回复了 pj 最后由 编辑
        #3

        @pj

        @dyp1121054136 在 在每个条目底部添加回到顶部按钮,优化长文浏览体验 中说:

        $:/tags/ViewTemplate

        可以了,不好意思把加tag加成标题了,还是很实用的,如果可以居中就更好了

        dyp1121054136D 1 条回复 最后回复
        0
        • dyp1121054136D 离线
          dyp1121054136D 离线
          dyp1121054136
          在 中回复了 pj 最后由 编辑
          #4

          @pj 居中对齐这样写

          <div style="text-align: center;">
          <$link to=<<currentTiddler>> tooltip="回到顶部">▲</$link>
          </div>
          
          1 条回复 最后回复
          0
          • 机杼机 离线
            机杼机 离线
            机杼
            写于 最后由 编辑
            #5
            <$button popup=<<qualify "$:/state/popup/back-to-top">> tooltip="回到顶端" aria-label="回到顶端" class=<<tv-config-toolbar-class>> selectedClass="tc-selected" style="display: block;width: 100%;margin: 1em auto;">
            <$action-navigate $to=<<currentTiddler>>/>
            {{$:/core/images/up-arrow}}
            </$button>
            

            或者这样。都差不多。还可以把其他一些按钮放在下面来。比如折叠按钮之类的。

            1 条回复 最后回复
            0

            • 登录

            • 没有帐号? 注册

            • 登录或注册以进行搜索。
            Powered by NodeBB Contributors
            • 第一个帖子
              最后一个帖子
            0
            • 最新
            • 版块
            • 标签
            • 热门
            • 用户
            • 群组
            • 太微中文教程
            • 新插件投票看板