Back to Top button customization

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 :)

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

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.

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?

You can move the arrow around like this:

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

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.

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

Thanks for the suggestions!

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

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.

Yes, I'll get this fixed in 2.5.0 :)

Folks: I would like to make the Back to Top button have text saying Back to Top wrapped and centered. Couldn't find this in the docs.

Hi Robert,

Give this CSS a try:

.generate-back-to-top span.gp-icon.icon-arrow-up:before {
    content: 'back to top';
}

If you want to do more customization, could you please open a new topic?

Thanks!