Forums

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
    Posts
  • #203885
    drone4four
    Participant

    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: https://www.digitalocean.com/community/tutorials/how-to-create-a-custom-404-page-in-apache

    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: http://codepen.io/Angeles4four/pen/XbaPoZ

    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.

    #203888
    herr_john
    Participant

    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.

    #203902
    Paulie_D
    Member

    As herr_john said position:fixed

    http://codepen.io/Paulie-D/pen/ZGJPzP

    #203985
    drone4four
    Participant

    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.