• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Back To The Top

Back To The Top 1.0.3b

No permission to download

MattW

Well-known member
#1
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...
 

MattW

Well-known member
#3
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;
 

MattW

Well-known member
#4
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
 

Dynamic

Well-known member
#8
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;
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

Well-known member
#9
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.
 

mrGTB

Well-known member
#11
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;
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:


float: right;
margin-right: 5px;
 

MattW

Well-known member
#14
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.
 

ibaker

Well-known member
#18
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

Well-known member
#19
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

Well-known member
#20
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?