1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained Back To The Top 1.0.3b

Simple "Back to Top" link generated as the user scrolls down the page

  1. MattW

    MattW Well-Known Member

    MattW submitted a new resource:

    Back To The Top (version 1.0) - Simple "Back to Top" link generated as the user scrolls down the page

    Read more about this resource...
     
    The8thLegion likes this.
  2. DRE

    DRE Well-Known Member

    this is dope cuz
     
    MattW likes this.
  3. MattW

    MattW Well-Known Member

    You can reduce the box size by lowering the font and padding in the CSS

    eg:
    Code:
            padding: 3px 5px;
            -webkit-border-radius: 3px;
            -khtml-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-size: 1em;
    
     
    The8thLegion likes this.
  4. MattW

    MattW Well-Known Member

    I've also added a drop shadow and made it opaque

    Code:
    #top-link {
            display:none;
            position: fixed;
            bottom: 60px;
            right: 30px;
            cursor: pointer;
            outline: none;
            padding: 3px 5px;
            -webkit-border-radius: 3px;
            -khtml-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-size: 1em;
            background: #445059; opacity: 0.5;
            color: #9CA5AA !important;
            z-index:1;
            -moz-box-shadow: 0 0 5px #888;
            -webkit-box-shadow: 0 0 5px#888;
            box-shadow: 0 0 5px #888;
    }
    
    back_to_top.PNG
     
    gordy and The8thLegion like this.
  5. DRE

    DRE Well-Known Member

    I used .75 for the opacity. Looks great in both light and dark themes. Thanks!
     
    gordy and MattW like this.
  6. Dynamic

    Dynamic Well-Known Member

    Is there a way to make it appear in the center of the screen and not the right?

    Thanks.
     
  7. MattW

    MattW Well-Known Member

    You should be able to play with the CSS to make it go where you want on the page:

    Code:
    position: fixed;
    bottom: 60px;
    right: 30px;
    
     
  8. Dynamic

    Dynamic Well-Known Member

    I tried that, but I would rather have something auto center it so it works well on mobile devices. If I do say 460px from the right, it will display okay, but on mobile phones it comes up weird.

    Thanks.
     
  9. MattW

    MattW Well-Known Member

    I tried playing with the CSS on my test site, but I couldn't get it to auto centre properly. I don't know enough CSS unfortunately at the minute.
     
  10. Dynamic

    Dynamic Well-Known Member

    Same here dude :(
     
  11. mrGTB

    mrGTB Well-Known Member

    Try this for aligning text center
    Code:
    text-align: center;
    You could also use "float: right, or "float:left;" - then using "margin-left: 10px" or "margin-right:10px" to push it inwards a little to suit from the edge of the forum.

    Example:


     
    MattW likes this.
  12. grantus

    grantus Active Member

    Awesome add-on! Just what I was looking for, thanks.
     
    MattW likes this.
  13. Krysteo

    Krysteo Member

    Useful, thanks.
     
  14. MattW

    MattW Well-Known Member

    Is anyone still using this on XF 1.2 and Chrome? I've just re-applied this myself, and it works on IE and Firefox, but not Chrome. Just wanted to see if anyone else is having this issue.
     
  15. Deepmartini

    Deepmartini Well-Known Member

    How about on mobile? Does this work?
     
  16. MattW

    MattW Well-Known Member

    Yeah, works on Chrome and Safari on my mobile. A forum user on Chrome also says it won't work on his desktop.
     
  17. QenTox

    QenTox Well-Known Member

    Go To Top! is working fine for me in all browsers so far. Does the same thing, if anyone is interested.
     
  18. ibaker

    ibaker Well-Known Member

    This works great on my 1.1.4 site...I downloaded a backup of my site into xampp on my local PC and still works great...installed XF 1.2 in my xampp and without touching anything else installed this and it doesn't work. The default "Top" link in the footer works but not this mod...shows the Go To Top link but does nothing when clicked.

    Using xampp v1.7.7 on a windows 7 box, Firefox v22 or IE v10...as I said the backup of my XF v1.1.4 site works ok installed in the same environment but not on XF v1.2
     
  19. MattW

    MattW Well-Known Member

    I've had it working on my 1.2 site, but it just wouldn't work in Chrome. I've not had chance to look at why it wasn't working yet, but I'll try and find some time this coming weekend.
     
    sampick69 and ibaker like this.
  20. ibaker

    ibaker Well-Known Member

    I have uploaded my v1.2 to my server for testing and this mod still isn't working...have you had a chance to have a look at it yet Matt?
     

Share This Page