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); }
}

И у вас появится эта красивая и привлекательная кнопка «Наверх» :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. Я пока не совсем понимаю, как интегрировать их вместе. Если вы или кто-то другой сможет помочь или отправить pull-запрос, это было бы замечательно :+1: