Floating Button on Scroll

Site URL: https://grape-opossum-anjy.squarespace.com/

Hello everyone,

at the moment I'm building a new restaurant website for a customer.

https://grape-opossum-anjy.squarespace.com/

Password: wiplasepia

Is it possible that the floating button on the right side appears after the user starts to scroll down the page?

Hope someone has a quick solution for my problem.

Thanks in advance 🙂

Best regards Waiki

Try adding to Last Line in Code Injection > Footer

<script>
$(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 200) {
               $('a.t-button.button2').fadeIn();
           } else {
               $('a.t-button.button2').fadeOut();
           }
       });
   });
  </script>

Hi Tuan Phan,

I added your new Code.

The button is still visible on the top. If I start scrolling down the page it disappears and if i continue scrolling it is visible again.

And when I scroll back to the top of a page it isn't visible until I start scrolling down again. This effect is what I need when the user is visiting the pages. 

Do you know what I mean 🙂 ?

On 5/25/2022 at 3:37 PM, waiki said:

Hi Tuan Phan,

 

I added your new Code.

The button is still visible on the top. If I start scrolling down the page it disappears and if i continue scrolling it is visible again.

 

And when I scroll back to the top of a page it isn't visible until I start scrolling down again. This effect is what I need when the user is visiting the pages. 

 

Do you know what I mean 🙂 ?

It looks fine to me. Did you solve it?

Unfortunately haven't solved it. The customer didn't like the solution and I removed the Code for the floating button.

Sorry that I couldn't test it further with you 🙂  As described above, the effect only works properly if you have scrolled down and then scrolled up again.

On 5/27/2022 at 2:36 PM, waiki said:

Unfortunately haven't solved it. The customer didn't like the solution and I removed the Code for the floating button.

Sorry that I couldn't test it further with you 🙂  As described above, the effect only works properly if you have scrolled down and then scrolled up again.

You can duplicate the site, add code & share duplicated site url