Help creating a jump to top button

Я нашёл простой способ, без 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); }
    }
    

И у вас появится эта красивая и привлекательная кнопка «Наверх» :smiley:

(она двигается ^^! посмотрите, как это работает здесь: forum.fususu.com/t/topic/21/last)

Выглядит круто, @Phuong_SuSu, но мне пришлось несколько раз нажать, чтобы добраться до начала длинной темы.

Обычно, когда пользователи нажимают на тему, Discourse перенаправляет их к последнему ответу, а многие старые ответы скрыты. Эта кнопка просто перемещает вас к заголовку, после чего появляются остальные ответы.
Поэтому это решение лучше всего работает, если люди прокручивают страницу с самого начала, а затем нажимают на неё ^^! Не знаю, есть ли исправление, или нам придется использовать какой-то JavaScript ^^

Не совсем. Он перенаправляет их к последнему непрочитанному ответу.

Клик по заголовку вернёт вас к началу темы.

Это работает блестяще и идеально дополнит компонент темы, который у меня есть: Scroll to Top Component - #17 by davidkingham. Я пока не совсем понимаю, как интегрировать их вместе. Если вы или кто-то другой сможет помочь или отправить pull-запрос, это было бы замечательно :+1: