Need some help adding a "return to top"-button...

Hello,

I want to add the same kind of "return to top"-button that can be found at the bottom of this forum.

I have my own custom image that I want to use as the icon, and I want it to be placed below the footer, and above the "Administrator Panel"-link.

Also, if it is possible without JS, that would be cool. But if not, then I will take it...

phpBB3

Thanks!

Good afternoon!

It takes very little JS.

AP - Display - Templates - General - overall_footer_end

Find:

Code:

<p class="copyright">
                  <strong>{ADMIN_LINK}</strong>
               </p>

Insert before this code:

Code:

<div class='btn_top'><p onClick="window.scrollTo(0, 0)"><img src='https://i.servimg.com/u/f21/18/45/41/65/top10.png' /></p></div>

https://i.servimg.com/u/f21/18/45/41/65/top10.png - link to your image

Save. Publish.

AP - Display - Colors &CSS - CSS Stylesheet

Code:

.btn_top p {
    background-color: #000;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  margin: auto;
  cursor: pointer;
}

.btn_top p:hover {
  opacity: 0.6;
}

Save.

Result:

Very cool!

But thinking about it, I think it would look better if it sat just under the "Administrator Panel"-link instead.

I have an idea of how to do this, but I want to be 100 percent sure before testing...

How to fix this?

Thanks.

This code

Code:

<div class='btn_top'><p onClick="window.scrollTo(0, 0)"><img src='https://i.servimg.com/u/f21/18/45/41/65/top10.png' /></p></div>

Insert after

Code:

<p class="copyright">
                  <strong>{ADMIN_LINK}</strong>
              </p>

Ah, yes, that's what I thought...

Thanks for helping!

Topic marked as "solved".

Thank you @Razor12345 for your help

Problem solved & topic archived. Please read our forum rules: ESF General Rules