Site logo

Archived topic

Smooth scroll vs Back to top scrolling

14 replies · Started by C on April 19, 2021

Viewing posts 1–15 of 15

Hello.

I'm new to GeneratePress (which so far is excellent) and have been trying my hardest to teach myself and use your support forums for help but I need some assistance.

I'm building a one page locally scrolling website but notice the performance and smoothness seems much better for those links which are manually set to smooth scroll vs the back to top scrolling feature so:

1) Is there any way I can achieve the same performance/smoothness for the back to top feature?
2) What's the best way to alter the logo to implement a smooth scroll to top?

Thanks in advance, your time is appreciated.

Hi there,

any chance i can see the site ?

Sure! Details added.

Any issues let me know.

Aah ok - we can only adjust the speed of the back to top scrolling - it doesn't support any 'easing' functions that the smooth scroll does unfortunately. If you want to try adjusting the speed then you can use this PHP Snippet:

add_filter( 'generate_back_to_top_scroll_speed', 'tu_back_to_top_scroll_speed' );
function tu_back_to_top_scroll_speed() {
    return 400; // milliseconds
}

Point 2 are you wanting to change the back to top icon ?

Thanks for looking into this David.

It's one of those minor things that if it was possible, would perfectly tie up the scrolling functions across the site but can appreciate their may be complexities.

If I add a child theme now (and switch to it), will it work ok or are there complications adding this partway through creation of the site? I can see if the scroll speed helps the perceived smoothness.

2) This would be to make the site logo on action, scroll to top. I guess if I can override the logo link to a # would that invoke the same back to top functionality?

Hi there,

If I add a child theme now (and switch to it), will it work ok or are there complications adding this partway through creation of the site? I can see if the scroll speed helps the perceived smoothness.

It shouldn't affect smooth scroll. It's a JS script. As long as it loads on your site and your link have the right class (smooth-scroll), it should work.

For point #2)

You can use this filter to do that.
https://docs.generatepress.com/article/generate_logo_output/

change the href to # and add class="smooth-scroll"

Ahhh sorry. My query was in relation to adding a child theme 80% into development of the site.

Other theme frameworks I've used had an issue where customiser settings weren't saved as an example issue, so just wanted to check if by adding a child theme at this stage, what the implications may be, if any.

For #2, perfect, thanks!

If your child theme only does something basic, like say, for style.css usage and simple non-smooth scroll related PHP filers on functions.php, then it shouldn't affect the smooth scroll.

But if it's something that massively affects the layout, does some database modification on customizer settings, or runs a script that directly conflicts with smooth-scroll js then that's going to be an issue.

Thanks for the update Elvin.

I intend to only use the Child Theme for functions additions.

I assume the child theme SHOULD be installed in this instance so I can make the changes recommended?

Thanks David. I'll digest that link and delve further.

That all worked fine and child theme now running. I had to re-add my custom CSS but that was luckily a minor issue as I made a note of this before making the changes.

Regarding the smooth scroll back to top button...

Within the Chrome developer tools, I was able to apply the smooth-scroll class to the button and it appeared to work REALLY well.

Is there a reason (very likely!) why we cannot alter the back to top button so it applies the smooth-scroll class. Obviously I may be unaware of A) compatibility/functionality of the script reasons or B) complications in applying this change to the overall code.

Is there a reason (very likely!) why we cannot alter the back to top button so it applies the smooth-scroll class. Obviously I may be unaware of A) compatibility/functionality of the script reasons or B) complications in applying this change to the overall code.

You can actually modify the HTML output of the back to top button with generate_back_to_top_output filter: https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/inc/structure/footer.php#L231

But back to top button has it's own script already. themes/generatepress/assets/js/back-to-top.min.js using smooth-scroll's script on it may cause issues.

That makes perfect sense.

I forget that back to top is the standard solution for all and smooth-scroll is a premium addition.

Happy to close this ticket. Thanks for all the help and support.

No problem. Glad to be of any help. :)

This archived topic is closed to new replies.