[docs] Add "back to top" button

[VibhorJaiswal]

• I have followed (at least) the PR section of the contributing guide.

fixes: #30421

https://deploy-preview-30441--material-ui.netlify.app/getting-started/usage/

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against c5e5345

[oliviertassinari]

https://mui.com/components/app-bar/#back-to-top

[mnajdova]

@VibhorJaiswal thanks for starting this effort, I've pushed a commit to refactor it a bit. @danilo-leal could you verify the design of the back to top button before we merge?

[mnajdova]

It's a great first pull request on MUI 👌 Thank you for working on it!

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against c8b9389

[danilo-leal]

Sweet 👍

[oliviertassinari]

We have a bug with the tooltip animation:

strange.tooltip.mp4

---

However, are we sure about this change? In #30421 I felt that the direction was "thanks for the suggestion, but no thanks".

Maybe it would help to leave a new comment on the issue to explain the rationale to move forward. What I'm most interested in is the rationale around the tradeoff. The main cons I can think about how the features are implemented in this PR, and that I experience is that when I start reading a page, and as soon as I start to scroll down, I get a blue animating on the bottom left of the page that distracts me, it interrupts my reading flow. Maybe a fading instead of a zoom animation would be less distracting?

Would it make sense to do a follow-up to add Google Analytics events to track the usage of the button? That if it has less than 10,000 clicks a month, <0.1% of the page views, then we remove the feature?

Alternatively, the UX I can experience in https://docusaurus.io/docs/advanced/client feel better: there is no strong primary color, and the button is only visible when scrolling up.

Another thought, should the scroll to the top be instant? It's how it behaves in https://docs.github.com/en/account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/about-notifications. Does it feel better or worse?

---

A final thought, the current UX is consistent with what I have built-in https://mui.com/material-ui/react-app-bar/#back-to-top (#17062), having this consistency is great, we use what we promote. But did I do a great job in insight? Maybe it's this demo that we should rethink 😁