[Resolved] Back to Top button customization

Home Forums Support Back to Top button customization

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #950119
    George

    I would like to customize the Back to Top button in the following fashion:

    1) I made the icon size a bit larger than the original and also adjusted the radius so that the outer shape is a perfect circle but the icon itself has shifted slightly to the top. How can I recenter it?

    2) I would like it to appear from the right (off screen) when it becomes visible with a sort of tweened animation, meaning start fast but come to rest slower. Reverse behaviour should be implemented when it disappears from the screen.

    Is this possible?

    #950145
    Leo
    Staff
    Customer Support

    Hi there,

    1. Can you link me to the page in question? Really hard to provide a solution like this without seeing the issue.

    2. Can you link me to an example? If it can be done using CSS then I can give it a shot.

    Let me know 🙂

    #950150
    George

    Here is an example page of what I am trying to achieve:
    https://madebyshape.co.uk/

    #950189
    Tom
    Lead Developer
    Lead Developer

    You can make it round like this:

    .generate-back-to-top {
        border-radius: 100%;
    }

    Unfortunately there isn’t a class added to the element when it becomes visible, so we can’t animate it from hidden to visible. I’ve made a note of this so we can implement it in the future.

    #950191
    George

    Fair enough, yeah, I’ve made it round but the icon inside the shape when made larger through the font size property seems to have shifted to the top a bit. You can see it yourself if you try it. Is there a way to center it?

    #950670
    Tom
    Lead Developer
    Lead Developer

    You can move the arrow around like this:

    .generate-back-to-top:before {
        position: relative;
        top: 2px;
    }
    #950826
    George

    Amazing, thank you, Tom! Also, thanks for taking a note for adding the class, it should be fun animating the Back to Top button!

    Also, another thing I noticed is that when clicking the Back to Top button to scroll up and then scroll down again for it to appear, it seems the button retaining the hover color when it gets back into view. It would be good for it to just have the original background color as it was set in the Customizer.

    #950856
    Tom
    Lead Developer
    Lead Developer

    That’s because it’s focused – I agree that it should lose focus once the top is reached.

    Thanks for the suggestions!

    #1220688
    Natalie

    Hi Tom

    Re the ‘back to top’ button retaining focus and hence the focus color after it is clicked, is that something that you’re planning on fixing?
    Is it actually fixable?
    Any css /code I could add to fix it myself?
    Thanks

    #1220692
    Natalie

    Oh – I’ve just noticed it is only happening in my (old) version of Firefox, I guess it is something that the browsers sorted out for themselves now.

    #1221031
    Tom
    Lead Developer
    Lead Developer

    Yes, I’ll get this fixed in 2.5.0 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.