Back to top button

Hi to all can someone help me to create this effect on back to top btn

thanks in advance

Using those code is also practical, just wanted to let you know. Because there can be something that won’t be replicated 100% with PG Interactions, so you can always write custom JS when needed.

But you can achieve this one with PG Interactions, with a little bit of a trick. I’ve made an example please check.

By the way, what I’ve done in the example is that I’ve added scrollTop as a custom property and applied it to HTML. And also applied CSS of scroll-behavior: auto to HTML, because transition wasn’t smooth as first.

Here’s another way - which does not use the scroll-behavior:auto (Safari does not seem to support it)

Grab this script - free to share and has some nice instructions:
Smooth Scrolling | CSS-Tricks

Add to the bottom of your page, before the final tag

Add an ID anchor tag at the top of your page. (I gave my navbar the “#topnavbar” ID)
Make a button and link to your top anchor tag

Hope that helps…

Try this