Add "Go to Top" Button Component

[amrutadotorg]

Hello,

It would be incredibly helpful to have a "Go to Top" button integrated into the SQLPage. Given the extensive reading involved in my use case, such a feature would significantly enhance user experience by allowing users to quickly navigate back to the top of the page.

The button should be clearly visible but not intrusive. It could be similar to the example from the Tabler.io website, as shown in the attached screenshot.

[lovasoa]

Maybe we could add a "position" attribute to the button component that could be set to inline (the default) or "(top|bottom) (right|left)" ?

And for scrolling to the top, we would just make a button that targets #sqlpage_header.

Pull request welcome !

[amrutadotorg]

I’m not sure if a standard button is sufficient. The concept of a ‘go to the top’ button is more complex. It remains hidden even if you scroll down slightly, only appearing when it’s truly needed.

[bever1337]

I'm not sure if SQLpage needs to add any additional features, but I'm new to the project. Please let me know what I'm missing.

HTML spec provides for page scrolling using anchors. When an anchor is empty, the page is scrolled to the top.

https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier

Example sqlpage implementation:

SELECT
  'button' AS component;

SELECT
  '#' AS link,
  'Go to top' AS title;

Note, this is also how developers can, for ex, provide a table of contents:

SELECT
  'button' AS component;

SELECT
  '#' AS link,
  'Here' AS title;

SELECT
  '#chapter-1' AS link,
  'Your First SQLPage' AS title;

SELECT
  '#chapter-2' AS link,
  'Your Second SQLPage' AS title;

--
-- much later in the page
SELECT
  'title' AS component,
  'chapter-2' AS id,
  'Your second SQLPage' as contents;

Using CSS scroll-* styles and well-placed IDs, developers have a lot of control. https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin