- This topic has 11 replies, 3 voices, and was last updated 4 years, 6 months ago by
.
-
Posts
-
Hi there,
Can’t quite figure this one out.
I am using the back-to-top button for each page.
I have also implemented ahtml { 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,
GabriCustomer Support
Hi there,
Does the issue exist without your own CSS?
Let me know 🙂
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,
GAny reason why you are not using our smooth scroll option?
https://docs.generatepress.com/article/smooth-scroll/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,
GDid you activate the smooth scroll option in the customizer?
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,
GCustomer Support
Hi Gabriele,
Yes, if you are using Headline block, the CSS class would be added to the
pnota.I would recommend using
Buttonsblock instead, add thesmooth-scrollclass to theButtonNOTButtons.Let me know if this works 🙂
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,
GYing’s solution is the best way.
You can replicate this sections with buttons block for sure:
https://www.screencast.com/t/grxAASsHJust get started and let us know if you run into any issues.
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,
GFor 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.
- You must be logged in to reply to this topic.
