Firstly - I'm no code guru. I generally keep fiddling with stuff until it works and I've learnt by trial and a lot of error. But I have a problem that is defeating me at the moment:

I have an RSD site that has a long index page navigated by jumping to Ids. I would like to incorporate a floating 'back to top' icon. I have a script (normally inserted in the header), a CSS file and 2 js files. I know they work because I've had it all working in a non RSD site but I can't figure how to get it to work on RSD. I've tried:

Adding a hidden HTML section with the script added as a header. And alternatively I've added the script to the header section on the settings page. I've then loaded the other files via the root directory of the resources, and by uploading them directly to the website. And every combination of the above. But no joy.

I suspect I'm doing something fundamentally wrong but have run out of ideas apart from maybe a floating icon is not compatible with a responsive site.

Any ideas. Cheers JP

Hi Jonathan,
Can you share a link to you page?

I have used this with success...and it is easy to do. You can change the pic and also you can change the .js file so it scrolls to where you want it and/or becomes visible when you want.

http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

Responsive or not doesn't matter.
But we're just playing a guessing game if we can't see a live page with your link code in place.

Hey Jonathan,

Is there a reason you want to use the Javascript? This can easily be done using just a simple Font Icon Link in RSD. I have attached a project that provides a basic example of a "floating" back to top arrow.

Adam

That works ok and I had already done something similar but the javascript allows smooth scrolling (as my nav to ID down the page is smooth scrolling) and it also allows it to become visible after a certain scroll distance distance. With your version it's not quite as slick.

regards JP

Hey Adam, I have been working on my blog; making it responsive, has been difficult, as a diversion I decided to try and implement your suggestion for the arrow link. It installed quickly and easily. Your instructions were excellent. I think that it is slick.
www.workhorsepainting.com
arrow link lower rt side. I added a mouse over color change to identify that it is active.

Hi Jonathan
Put this script in your footer:

<script type="text/javascript">

$(window).load(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top -60;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 700, function() {

});
});
}
}
});

// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

});

</script>

Please note that the script I just posted has an offset of -60
If you don't want it set it to
$target.offset().top -0;

Looks pretty good! I would recommend moving it to the left just a little, as the scroll bar sits on top of it in Safari.