[Support request] Scroll-smooth affects the back to top button and makes for a bad user experience

[Gabriele]

Hi there,

Can’t quite figure this one out.
I am using the back-to-top button for each page.
I have also implemented a

html {
  scroll-behavior: smooth;
 }

for the links to page sections to go a little bit smoother.
When doing that, the native scroll to top button behaves very strangely and takes forever to go to the top of the page on desktop, while actually freezes on mobile (might be only on my devices…still there seems to be a bit of a problem).
Do you know how I could have the smooth scrolling for HTML anchors (id) but keep the nice and fast back-to-top for the button?

You can check this on any page, really, but anyway, here’s a long one:
https://creaators.com/choose-the-best-cms-for-your-creative-project/

Cheers,
Gabri

[Leo]

Hi there,

Does the issue exist without your own CSS?

Let me know 🙂

[Gabriele]

Hi Leo,

it doesn’t. But then when using id anchors, it just jumps very abruptly.
Would hope for a smoother scroll in that case, but a quick one for the back-to-top button.
Does that make sense?

Cheers,
G

[Leo]

Any reason why you are not using our smooth scroll option?
https://docs.generatepress.com/article/smooth-scroll/

[Gabriele]

Hi Leo,

Thanks for pointing that out.
Just tried to implement that and it seems to just jump right to the section (see it happening on that very same page https://creaators.com/choose-the-best-cms-for-your-creative-project/)
Maybe I’m doing something wrong?

Also, I have been using this container link technique in other places (like at the bottom of that page, next article or back to home) – not sure that would work cause the is inside of the larger link container? But you probably know better, so looking forward to hearing what you think!

Cheers,
G

[Leo]

Did you activate the smooth scroll option in the customizer?

[Gabriele]

Right, yes I believe I have.
Just snooping around the code, and it seems that the ‘smooth-scroll’ class is applied to the <p> element, rather than the actual .
Could this be why?
Cheers,
G

[Ying]

Hi Gabriele,

Yes, if you are using Headline block, the CSS class would be added to the p not a.

I would recommend using Buttonsblock instead, add the smooth-scroll class to the ButtonNOT Buttons.

Let me know if this works 🙂

[Gabriele]

Hi Ying,
thanks for your reply!

I’m not sure how I could replicate the current layout/look with buttons…also, I have many of these ‘hooks to other parts of the page’ within the paragraph text.
There must be another way to do it and take care of the smooth scrolling at the same time, I’m sure I’ve seen it done other places?

Cheers,
G

[Leo]

Ying’s solution is the best way.

You can replicate this sections with buttons block for sure:
https://www.screencast.com/t/grxAASsH

Just get started and let us know if you run into any issues.

[Gabriele]

Hi Leo and Ying,
Thanks a lot for all your help.

So easily replicated the summary list at the top of the blog (here), but I am now struggling to add the smooth-scrolling to text that is part of Genertae Blocks paragraphs, such as on this other page, specifically on 1) the paragraph and 2) or the container-link at the very end of the post (both screengrabbed below for your reference)

Really hope you can help with this!
Cheers,
G

[Ying]

For the links that inside a paragraph, select the headline block, click on the 3 dots, edit as HTML.

Then manually add the class="smooth-scroll"to the link in paragraph:

<a href="#top" class="smooth-scroll">at the end of the post</a>

The container doesn’t link to the same page, it links to another page, so I don’t think smooth scroll would work in that case.

[Author]

Posts