Help creating a jump to top button

Dev
22

I found a simple way, no java, just css & html.

  1. Put this in the <after header>

    <a name="top"></a>
<a class="to-top" href="#top" title="Go to top">^</a>

  2. Then a little fancy 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); }
}

Then you will get this beautiful & attractive “go to top” button :smiley:

(it’s moving ^^! see it in action here: forum.fususu.com/t/topic/21/last)

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

2 Likes
23

Looks cool @Phuong_SuSu, but I did have to tap a few times to get to the top of a long topic.

24

Normally when users click on a topic, discourse will send them to the lastest reply, many old replies are hidden. The button just move you to the header, then other replies come up.
So this solution works best if people scroll from the begining, then tap it ^^! I wonder is there a fix, or we must use some javascripts ^^

25

Not quite. It sends them to the latest reply that they haven’t read yet.

Clicking the title will take you back to the top.

1 Like
26

This works brilliantly and would compliment the theme component I have Scroll to Top Component perfectly. I can’t quite figure out how to integrate these together, if you or someone else could help or submit a PR it would be fantastic :+1:

1 Like