Jump to content

Floating Button on Scroll

Recommended Posts

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

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 🙂 ?

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.