# Back to top button

**URL:** <https://forum.pinegrow.com/t/back-to-top-button/5598>\
**Category:** Styling (CSS)\
**Created:** [August 29, 2021, 7:51pm UTC](https://forum.pinegrow.com/t/back-to-top-button/5598 "2021-08-29T19:51:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vincentba](https://avatars.discourse-cdn.com/v4/letter/v/90db22/32.png) [@vincentba](https://forum.pinegrow.com/u/vincentba)\
**Post date:** [August 29, 2021, 7:51pm UTC](https://forum.pinegrow.com/t/back-to-top-button/5598/1 "2021-08-29T19:51:37Z")

</div>

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](https://mdbootstrap.com/snippets/standard/mdbootstrap/2964350#css-tab-view)

thanks in advance

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [August 30, 2021, 6:33am UTC](https://forum.pinegrow.com/t/back-to-top-button/5598/2 "2021-08-30T06:33:05Z")

</div>

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.

> **[back-to-top.zip](https://drive.google.com/file/d/19kU3rw1fqWkcUIzw7yFcTWz0cRrzEOvt/view?usp=sharing)**
>
> Google Drive file.

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.

---

<div class="post-metadata">

**Author:** ![SteveH](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/steveh/32/2560_2.png) [@SteveH](https://forum.pinegrow.com/u/SteveH)\
**Post date:** [September 1, 2021, 10:49pm UTC](https://forum.pinegrow.com/t/back-to-top-button/5598/3 "2021-09-01T22:49:12Z")

</div>

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](https://css-tricks.com/snippets/jquery/smooth-scrolling/)**

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…

---

<div class="post-metadata">

**Author:** ![mxs](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mxs/32/2943_2.png) [@mxs](https://forum.pinegrow.com/u/mxs)\
**Post date:** [September 3, 2021, 2:56pm UTC](https://forum.pinegrow.com/t/back-to-top-button/5598/4 "2021-09-03T14:56:56Z")

</div>

Try this

> **[Tryit Editor v3.7](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top)**