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

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

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

    Friendly Toucan
    Friendly Toucan
    Forumember


    Posts : 243
    Reputation : 4
    Language : English

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

    Post by Friendly Toucan February 4th 2023, 11:50 am

    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!
    Razor12345
    Razor12345
    Support Moderator
    Support Moderator


    Male Posts : 1575
    Reputation : 266
    Language : Ukr, Rus, Eng
    Location : Ukraine

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

    Post by Razor12345 February 4th 2023, 12:18 pm

    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:

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

    skouliki, sivastar, TonnyKamper and Friendly Toucan like this post

    Friendly Toucan
    Friendly Toucan
    Forumember


    Posts : 243
    Reputation : 4
    Language : English

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

    Post by Friendly Toucan February 4th 2023, 1:10 pm

    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... Smile

    How to fix this?

    Thanks.
    Razor12345
    Razor12345
    Support Moderator
    Support Moderator


    Male Posts : 1575
    Reputation : 266
    Language : Ukr, Rus, Eng
    Location : Ukraine

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

    Post by Razor12345 February 4th 2023, 1:13 pm

    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>



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

    TonnyKamper and Friendly Toucan like this post

    Friendly Toucan
    Friendly Toucan
    Forumember


    Posts : 243
    Reputation : 4
    Language : English

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

    Post by Friendly Toucan February 4th 2023, 1:18 pm

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

    Thanks for helping!

    Topic marked as "solved".
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19327
    Reputation : 2005
    Language : fluent in dork / mumbojumbo & English haha

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

    Post by Ape February 4th 2023, 1:21 pm

    Thank you @Razor12345 for your help Wink
    Problem solved & topic archived.
    Please read our forum rules: ESF General Rules



    Need some help adding a "return to top"-button... Left1212Need some help adding a "return to top"-button... Center11Need some help adding a "return to top"-button... Right112
    Need some help adding a "return to top"-button... Ape_b110
    Need some help adding a "return to top"-button... Ape1010

    Razor12345 likes this post