Help creating a jump to top button

开发
22

我发现了一个简单的方法，无需 Java，只需 CSS 和 HTML。

  1. 将以下内容放在 <after header> 中：

    <a name="top"></a>
<a class="to-top" href="#top" title="返回顶部">^</a>

  2. 然后添加一点精致的 CSS：

    .to-top {
  z-index:3;
  position: fixed;
  left: 2%;
  bottom: 5%;
  padding: 10px;
  line-height: 12px;
  font-size:18px;
  color:black;
  border:solid 1px black;
  border-radius:10px;
  -webkit-animation: float 1s infinite  alternate;
  animation: float 1s infinite  alternate;
}

.to-top:hover{
  color:white;
  background:black;
}

@keyframes float {
  0% { transform: translateY(10px); }
  100% { transform: translateY(30px); }
}

@-webkit-keyframes float {
  0% { transform: translateY(10px); }
  100% { transform: translateY(30px); }
}

这样你就会得到一个漂亮又吸引人的“返回顶部”按钮：:blush:

（它会移动哦 ^^！点击这里查看实际效果：forum.fususu.com/t/topic/21/last）

48%20AM
48%20AM530×608 47.3 KB

23

看起来不错 @Phuong_SuSu，不过我确实得点了好几次才能回到长帖子的顶部。

24

通常，当用户点击一个主题时，Discourse 会将其跳转到最新回复，许多旧回复会被隐藏。这个按钮只是将你移到标题处，然后其他回复才会显示出来。
因此，这个解决方案最适合从开头开始滚动、然后点击它的情况^^！我在想是否有修复方法，还是必须使用一些 JavaScript ^^

25

不完全是。它会将他们带到他们尚未阅读的最新回复。

点击标题会带你回到顶部。

26

这效果非常出色，能完美搭配我现有的主题组件 https://meta.discourse.org/t/scroll-to-top-component/116506/17。我一时还不太清楚如何将它们整合在一起，如果您或其他人能提供帮助或提交 PR，那就太棒了 :+1: