Archived topic
Customising back to top
3 replies · Started by Brian on November 9, 2022
On our site we get a lot of comments. I wanted a simple way to let users just to the start of the comments.
I tried some of the back to top plugins but they are missing two features i need:
- The ability to set a custom target, i want to link to #respond
- The ability to have a custom icon, i would like to show a speech bubble
So I was thinking, is there any way to customise the built-in GP back to top feature to edit the target and change the icon?
Thanks
Hi there,
instead of using the GP Back to top, we could build our own one.
1. Add this PHP Snippet to your site:
add_action('generate_after_footer', function() {
printf(
'<a title="%1$s" aria-label="%1$s" rel="nofollow" href="#respond" class="generate-back-to-top">
%2$s
</a>',
esc_attr__( 'Scroll to comments', 'generatepress' ),
generate_get_svg_icon( 'comments' )
);
});Note: the href="#respond" you can change that to the jump-link you need.
Then add this CSS:
html {
scroll-behavior: smooth;
}
.generate-back-to-top {
--btt-offset: 600px;
position: sticky;
bottom: 20px;
left: calc( 100vw - 60px );
margin-top: calc(100vh + var(--btt-offset));
padding: 10px;
}Note this line: --btt-offset: 600px;
The 600px is how far from the top of the page before the button will appear.
Let me know if that works for you
Excellent, thanks David.
Just to clarify, am I adding this to the functions file or where?
1. is PHP so it goes in your child theme Functions.php
2. is CSS so it can go in child theme styles.css or in the Customizer > Additional CSS
