I have a long page with a detail of an event. In the right corner of this page is present a floating action button to enter editing mode. Where I can place a back to top button?

  • 1
    Can you add some more info? is it a phone app, desktop website, etc. Also do you really need a back to top button?
    – Martyn
    Commented Apr 12, 2020 at 19:03
  • Floatng buttons give me migraines. Your mileage may vary, but I find a position:fixed headers and footers are less likely to give me migraines than the standard animation poasition:sticky ones, or sidebars, or floating buttons.
    – Marja E
    Commented Sep 5, 2021 at 14:54
  • Can you share further information regarding why you need the user to go back to the top of the page? Is it for them to go back to some other page? Is there a CTA for which you wish to send the user back to the top (unlikely given that you have an FAB)? Do you want the user to be able to access the top navigation?
    – ikartik90
    Commented Oct 5, 2021 at 15:13
  • Perhaps hard-code a top button every so often on a long page in mobile. One such instance: reedyrace.com/ae/ateamapps/vehicle_tuning/spring-rates/…
    – Steve
    Commented Feb 2, 2022 at 17:13

3 Answers 3


Here's something things you could consider

  • The back to button doesn't need to be floating like the FAB. If there's too many things floating they will be competing for attention. Also putting the back to top at the end of your content ensures that the user has gone through all of it.

  • You could place the back to top button on the bottom left or bottom centre of this screen.

Hope it helps.

  • I totally agree with your first point but I'm don't fully agree on place the back to top button at the bottom left or bottom center of the page. I think that it should be placed at the bbottom right, maybe it is wrong the edit fab button
    – Dennis
    Commented Apr 12, 2020 at 11:06

The Floating Action Button should be main feature of the page in your application. There is good practice if you use floating action button specific for the important actions. May I ask please why an user needs to edit the details of an event? Is it for admin panel are you designing or is it for the end user who will just have a look for an event?

I did bit research on when to use FAB. The special thesis from Steve Jones (USER EXPERIENCE IMPLICATIONS OF THE FLOATING ACTION BUTTON) might help you to make reasonable decision.

Furthermore, as per the thesis from Steve Jones, he argues and highlights that FABs are made for creating something new on a specific page. Here, the question of using FAB as edit the action which might contradict the edit guidelines of google material design.

So, FABs are designed for creation/addition of main content of the webpage. You might use FAB for creating new event in your case, but not to edit the event.

Thesis: user experience implications of the floating point action button.

  • The edit fab button is visible only for an admin user. In your opinion it's better to have a simple edit button at the bottom of the page instead of a fab button?
    – Dennis
    Commented Apr 12, 2020 at 10:59
  • @Dennis, Edit might be part of the navigation panel in your design. As the principles for FAb are primarily focused on to highlight the main feature of the application. If you are following Google's material design guideline then there are principles for editing action: This link might help: material.io/components/bottom-navigation/#usage
    – Manghud
    Commented Apr 12, 2020 at 11:08
  • 1
    Can you provide a reference to the thesis and also point out the relevant section or summarise it her for completeness of the answer?
    – Michael Lai
    Commented Apr 12, 2020 at 20:53

Please refer to the this wonderful article Back to Top Button Guidelines. Bullet points 1, 2, 7 and 8 are worth checking out for answers to your question.

Good luck !

  • 1
    Because some links in answers may be taken down by their respective owners, it would be helpful to summarize some of the relevant points in your answer.
    – Steve
    Commented Feb 2, 2022 at 17:10

Not the answer you're looking for? Browse other questions tagged or ask your own question.