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="Go to top">^</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); }
}

これで、美しく魅力的な「トップへ戻る」ボタンが完成します :smiley:

（ふわふわと動きます ^^! 実際の動きはここで確認できます: forum.fususu.com/t/topic/21/last）

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

23

Phuong_SuSu さん、素敵ですね！ただ、長いトピックのトップに戻るには、何度かタップする必要がありました。

24

通常、ユーザーがトピックをクリックすると、Discourse は最新の返信に移動し、多くの古い返信は非表示になります。このボタンはヘッダーに移動するだけで、他の返信が表示されます。
したがって、この解決策は、ユーザーが最初からスクロールしてタップする場合に最も効果的です ^^! 修正方法があるのか、それとも JavaScript を使用する必要があるのか気になります ^^

25

正確には、まだ読んでいない最新の返信に移動します。

タイトルをクリックすると、トップに戻ります。

26

これは見事に機能し、私が持っているテーマコンポーネント Scroll to Top Component - #17 by davidkingham と完璧に相性が良いです。これらをどう統合すればよいか少し困っています。もしあなたや他の誰かがお手伝いするか、PR を提出してくだされば大変喜ばしいです :+1: