Back to top button

Styling (CSS)
1

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

https://mdbootstrap.com/snippets/standard/mdbootstrap/2964350#css-tab-view

thanks in advance

2

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.

3

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…

4

Try this