Back To The Top 1.0.3b

[MattW]

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

This simple change allows you to add a hidden Back To Top link which will only appear as the user scrolls down the page. When they click the link, it will scroll them back to the top of the page.

View attachment 27380

Installation.
Download the jquery.scrollTo-1.4.2-min.js.zip file, and upload the jquery.scrollTo-1.4.2-min.js file to your js/jquery/ folder.

In the ACP, go to Apperance --> Templates.

Create a new template called back_to_top, and add the below code into...

Read more about this resource...

 

[DRE]

this is dope cuz

 

[MattW]

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

eg:

        padding: 3px 5px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 1em;

 

[MattW]

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

#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;
}

 

[DRE]

I used .75 for the opacity. Looks great in both light and dark themes. Thanks!

 

[Dynamic]

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

Thanks.

 

[MattW]

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

Thanks.

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

position: fixed;
bottom: 60px;
right: 30px;

 

[Dynamic]

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

position: fixed;
bottom: 60px;
right: 30px;

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.

 

[MattW]

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.

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.

 

[Dynamic]

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.

Same here dude

 

[mrGTB]

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

position: fixed;
bottom: 60px;
right: 30px;

Try this for aligning text center

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:

float: right;
margin-right: 5px;

 

[grantus]

Awesome add-on! Just what I was looking for, thanks.

 

[Krysteo]

Useful, thanks.

 

[MattW]

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.

 

[Deepmartini]

How about on mobile? Does this work?

 

[MattW]

How about on mobile? Does this work?

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

 

[QenTox]

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

 

[ibaker]

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

 

[MattW]

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

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.

 

[ibaker]

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?