Top of Page Link?

[Tyler Durbin]

Does anybody know a good way to put a "Top of Page" link at the bottom of each page? 

 

It would be great for the forums and main page.  I thought i saw something earlier that someone did but I can't seem to find it...

[Being in the Now]

Thanks Tatay very well explained...i really apreciate...and works

have beautiful day ;)

[Brandon Owens]

Thanks Tatay & Tyler.

@luliana & @Being in the now

I put the .js file location into my browser address bar to get all the javascript. http://api.ning.com/files/barP4CvULJhLKKEncvsEhvM7eEd2lAXN7ZT8NK-6k...
_
_If you select all of that as text & paste into your custom code in between the <script tags> it should work.  Example at bottom of this reply.
__
_@luliana within the script below you can change the img src= to be another arrow image file for a different color.  I do not know if you can alter just the color but you can use another image.
__
_change this line, in bold in code below. replace with your new image location.
_<img src="http://gapon.org/backtotop.png" style="width:48px; height:48px" />

@being in the now

To move it higher on the page, you will want to change this line, also in bold below.  You will have to try different number values but increasing the offsety by 100 pixels or so should do the trick. offsety:125 If you want it near the top of the page instead, I found offset 540 works well for me.

controlattrs: {offsetx:5, offsety:25}, //offset of control relative to right/ bottom of window corner
You can see how it works on my site here. StudyMoreChinese - Learn Chinese Faster

I am no expert at all so I hope it works for you.  I just messed around with the code others provided.  

Best of luck,

-Brandon
Original JS example.

<script type="text/javascript">

 

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.

var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://gapon.org/backtotop.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:25}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}

scrolltotop.init()

</script>

<!-- End Back to top -->

 

[Being in the Now]

Thanks for your help Brandon...

Have a beautiful day ;)

[Andrew Young]

Anyone know which code is needed to make the blue "top of page" link appear on top of everything else?

Currently it hides behind the modules unless you increase the browser with.

[Fire-Tech]

You need to add a higher z-index. You can look at the code in mine as an example. Just keep in mind that it will always float on top of things so keep your image small.

[Atheist Universe]

Great script, it works fine for us.

I put it on the left side as we already have buttons on the right.

[Dawn]

Awesome tip! Exactly what I was looking for- thx Tatay!