[Support request] Customising back to top

[Brian]

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

[David]

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

[Brian]

Excellent, thanks David.

Just to clarify, am I adding this to the functions file or where?

[David]

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

[Author]

Posts