How to create a scrolling Floating Action Button

Support
#1

HI, I have a link which activate a calendar reservation system that displays on the page but I need to add a floating button with that link on my pages.

How can I create on a page a floating button that scrolls automatically when a person scroll my page. It should stick to the right and continue to float there as the person continues to read the page up and down.

Thank you.

#2

Hi Pierre,

Thank you for writing in, regretfully there is no native element that has that feature. But there is this Content Dock Extension, please try it and see if that’s what you need.

Content Dock example

Else, please test any of the top floating button plugin and see which one suits your needs.

Hope it helps,
Cheers!

#3

Thank you, will look at these…

#4

That is not exactly what I am looking for…

I 'd like to have a button that stays on the right side of my pages. That would be a button that automatically scroll when the person move up and down on that page but stays there until eventually the person decides to click on it as it is my cession reservation button.

The button is to be used to reserve / book a cession. The button behind the scenes is a link to my calendar system.

#5

Hey @PierreMeul,

In this case, since you’ve tested all plugins Friech suggested and none of them suit your need, you will need to hire a developer to create a custom function for you. In case you don’t know, you can hire a freelancer in Upwork or Fiverr.

Thanks.

#6

I have received this code from the calendar application dev team. I am supposed to put in the page html where I want it to be displayed on that page.

The problem is that when I insert this on my main site page (home), it breaks the title on mobile and does not display on mobile neither. But it does display on Desktop and my main page title is safe too.

How can i make it work on both desktop and mobile?

#7

Hi @PierreMeul,

Please ask the developer where should it be added. Is it on header, footer, or opening of the content?
Once you know where, this guide will help you on how to add it:

Hope this helps.

1 Like
#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.