[Resolved] Back to top customization

[Richard]

Hey guys,

searched for this in the forum and couldn’t quite find it.

For this site, https://eatthat.de/ , the client would like to have the back to top button to be:

– fixed in place (no starting viewpoint?)
– centered on all screen sizes
– chevron-double-up as icon (font awesome)

Any way doable?

Thanks for your help!

Best,
Richard

[David]

Hi Richard,

you can use this filter to set the starting position:

https://docs.generatepress.com/article/generate_back_to_top_start_scroll/

Horizontally centred:

.generate-back-to-top, .generate-back-to-top:visited {
    right: calc(50% - 15px);
}

Change icon:

.generate-back-to-top:before {
    content: "fa unicode in here";
    font-family: FontAwesome;
}

Add the fa unicode and set the font family.

[Richard]

Hi David,

last two worked, thank you!

In which location would I put the hook in GP hooks?

And what goes where in here:
generate_back_to_top_start_scroll

add_filter( ‘filter_name’, ‘example_function_name’ );
function example_function_name()
{
return ‘Your new value’;
}

Any recommendations for the value to make it stay at the bottom?

Thank you!

Best,
Richard

[David]

You would need to add that function to your child theme functions.php or use Code Snippets.
I believe 0 should keep it displayed 🙂

[Richard]

Is filter name and function name the same?

Like this:

add_filter( ‘generate_back_to_top_start_scroll’, ‘generate_back_to_top_start_scroll’ );
function generate_back_to_top_start_scroll()
{
return ‘0’;
}

[David]

No, its the one thing it shouldn’t be. Name the function whatever you want – something meaningful, don’t use hyphens just underscores.

[Richard]

So I have this:

add_filter( ‘generate_back_to_top_start_scroll’, ‘back_to_top_fixed’);
function back_to_top_fixed()
{
return ‘0’;
}

But isn’t doing anything in the front-end. 🙁

[Richard]

‘O’ has it right from the top.

[Richard]

3000 does the trick on desktop, but this isn’t responsive, of course – it just slips off the page.

[David]

OK, scrub that then, lets use some CSS:

.generate-back-to-top {
	visibility: visible !important;
	opacity: 1 !important;
}

[Richard]

Hey Dave,

so I deactivated the snipped and added the CSS.

Now it’s back at the top. It just needs to stay put in the footer. 🙂

Thanks!
Richard

[David]

Try clearing caches – it’s slap bang center at the bottom of the screen for me 🙂

[Richard]

And stayed put at the bottom?

[Richard]

Cleared cache and it starts right below the slider.

[David]

Aah, sorry i think i misinterpreted this…. you don’t want the back to top to display at all other then when you reach the actual footer?

[Author]

Posts