The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] “scroll to top” / “home” link sticking to bottom of browser window

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #203885

    I am trying to create a home button for the content in subsequent child web-pages. The home button feature is implemented quite nicely in the guides found on DigitialOcean’s community documentation. See here:

    In this example it’s actually “scroll to top”. I inspected the element and tried to replicate it for my purposes. Here is my reduced test case:

    As you can notice, I changed the elements from “scroll to top” to “HOME”. I made a few other minor changes to the style from the original. What I am having trouble with is having it stick to the bottom left of the user’s window so that they always see it at the foot of the window even when the user is half way down the entire web-page, just the way it works on DigitalOcean. As is my HOME link is static, placed all the way at the bottom of the entire paragraph text.

    I tried shifting the hyper reference from the base of the final paragraph to the base of the first paragraph text, again it remains static positioned there. I also tried changing up the right and bottom values in the home identifiers in the css, which didn’t effect anything.

    I am at a loss trying to figure this out. Am I missing some necessary JavaScript? Or is there a strictly css way of achieving what I have set out to achieve?

    Thanks for your attention.


    If you want an element to be sticky relative to the viewport, you have to give the sticky element a position: fixed;

    In your case:

    #home {
    position: fixed;

    Hope this helps.


    As herr_john said position:fixed


    Thanks guys, you’ve resolved my issue.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.