Thread: 'Back to top' positioning?

On my test tumblr (ginnypig) I have a little 'back to top' button that magically appears when the user scrolls down the page. As it is the button appears in the bottom right of my page, but I would like it to appear at the base of my sidebar.

I've found the CSS for this and can get it where I desire with a right margin of 810px, but is there a better way of doing it, and one that would assure correct positioning across all platforms?

I've also located the js code for the button, and thought I could just nest it in my sidebar div, but as it's code I'm unfamiliar with I'm not too sure about the dos and don'ts.

CSS:

Code:

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://static.tumblr.com/53unaru/4LKlgzkav/ui.totop.png) no-repeat left top;
opacity:0.3;
}

#toTopHover {
background:url(http://static.tumblr.com/53unaru/4LKlgzkav/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0.3;
-moz-opacity: 0;
filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
outline:none;
}

JS:

Code:

<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>

<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/

$().UItoTop({ easingType: 'easeOutQuart' });

});
</script>

Thanks in advance.