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
  • Views 659
  • 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.