jquery scroll to top control

[ozetigerman]

1) Script Title: jquery scroll to top control

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

3) Describe problem: I've installed the jquery scroll to top control from Dynamic Drive and everything works except the image doesn't appear on the page.
The link is there and when I hover over where the image should be the text comes up "scroll back to top", I click and the page scrolls to the top. I've tried placing my image in various directories, but have had no joy. Any ideas??

I've only put the scroll to top control on one page so far and that page is http://navyvic.net/vale/vale.html
The image should be in the bottom right hand corner.

I've been using dd scripts for a few years and if I've had a problem I've been able to sort it out in my amateurish way. But I can't see what's wrong here.

[Deadweight]

Ummm fyi you have:
opacity:0;
change that to
opacity:1;

[jscheuer1]

When I look at your page, I notice it doesn't scroll like some others. I think that's the problem. Add this to a stylesheet:

#topcontrol {opacity: 1 !important;}

That should enable you to see the image all the time. For the setup on that page, the script may or may not be able to be edited to have the image hidden at certain scroll states.

[ozetigerman]

Thanks mate. But it didn't work. John's solution below has worked though, even though it doesn't fade in and out.

Thanks for help.

[ozetigerman]

Thanks John,

Yes, that works but it doesn't fade in and out. Will have to be satisfied. Tried changing the opacity in the .js file but that didn't work.

Will have to be satisfied with the image on the page permanently.

Thanks for your help.

[Deadweight]

I kinda remade it but here is a simple version:
JQuery:

$(function(){
	scrollup({
		id: 'autoup',
		image: 'up.png',
		display: 100,
		fadeduration: [300, 300, 300] //fade in, fade out, scroll time
	})
})

function scrollup(a){
	var html = '<div id="'+a.id+'"><img src="'+a.image+'" \/></div>'
	$(html).appendTo('body');
	
	
	$(document).on('scroll',window, function(){
		if($(this).scrollTop() >= a.display)
			$('#'+a.id).fadeIn(a.fadeduration[0]);
		else
			$('#'+a.id).fadeOut(a.fadeduration[1]);
	})
	
	
	$(document).on('click','#'+a.id,function(){
		$("body,html").animate({scrollTop: 0}, a.fadeduration[2]);
	})
}

CSS:

#autoup { position:fixed; right:10px; bottom:5px; cursor:pointer; display:none;}

Updated and you still do not need anything in the body.

Please notice that the id in the scrollup function matches the id in the css

[jscheuer1]

The problem here is that due to its layout, on the example page, neither the $(window), nor the $('html') objects appear to register any scrolling action. At least not in Opera, I'm not sure about others. The script only registers whether or not to show the button as a consequence of the scroll state of the $(window) object, which is always 0 in this case. The event which triggers this inquiry is the $(window) object's on scroll event (on resize also). But since the scroll event never happens, even if triggered via resize, the scroll state would still be 0 - below the threshold to reveal the button. All this could be changed to use the $('body'), which does register scroll on this page, but it might not be cross browser. Again, the limitation first arises because of the page's somewhat unique layout.

[jscheuer1]

Things are further complicated on the page because it's also running a prototype/scriptaculous version of lightbox. That's throwing errors such that even if we used the body's scroll state, it still might not reveal the image. The page doesn't appear to be using the lightbox script, so that could be removed. If other, similar pages are using it though, jQuery and the scroll to top script could be run in no conflict mode. But that doesn't always work. A jQuery lightbox type script could be used instead, then one could get rid of prototype/scriptaculous. For now, unless you want to try at least some script changes, and perhaps a lot of changes, I'd just leave it be. At least it's working.

[jscheuer1]

OK, this will actually be easy if you want to fix it and you don't need the lightbox (which is an older outdated version that you don't appear to be using anyway). Just get rid of this (from the page's source code):

<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>
<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />

If you do need a lightbox for other pages, use a jQuery based one like Slimbox2 or Fancybox.

[ozetigerman]

DW & John,

Thanks for your help, now I'm totally confused. It gets a bit much for an old man like me.

Will take the time to understand and try the ideas out. It's funny that it's working on other pages but at the moment I'm unable to upload them because I'm getting a 552 disc full error. Need to contact my ISP

Thanks for your help again
Laurie