keyboard

Scroll to Top Script

Rate this Entry

0 Comments

, 10-11-2012 at 01:00 AM (19792 Views)

Here's my alternative to the ddscript Jquery Scroll to Top Control V1.1

scroll_to_top.js

Code:

$.fn.scroll_to_top = function(userOptions) {
	var check_scroll = 0;
    var defaultOptions = {
		image : 'jump_to_top.png',
		image_height : '6%',
		image_width : '3%',
		scroll_distance : 200,
		scroll_location : 0,
		scroll_speed : 600,
		button_animate_speed : 200,
		button_animate_type : 'fade',
		position : 'bottom_left'
    };
    var args = defaultOptions;
    if(typeof userOptions === 'object') { 
		args = $.extend(defaultOptions,userOptions);
	}
	switch(args.position) {
		case 'top_left':
			var css = 'top:0;left:0;';
		break;
		case 'top_right':
			var css = 'top:0;right:0;';
		break;
		case 'bottom_right':
			var css = 'bottom:0;right:0;';
		break;
		case 'center':
			var css = 'top:50%;bottom:50%;left:50%;right:50%;';
		break;
		default:
			var css = 'bottom:0;left:0;';
	}
	css += 'margin-bottom:5px;margin-top:5px;margin-left:5px;margin-right:5px;display:none;position:fixed;height:' + args.image_height + ';width:' + args.image_width + ';cursor:pointer;';
	$('body').append('<img src="' + args.image + '" alt="Scroll to top" title="Scroll to top" id="scroll_to_top" style="' + css + '"/>');
	$(window).scroll(function() {
		if($(this).scrollTop() > args.scroll_distance) {
			switch(args.button_animate_type) {
				case 'slide' : 
					$('#scroll_to_top').slideDown(args.button_animate_speed);
				break;
				default:
					$('#scroll_to_top').fadeIn(args.button_animate_speed);
			}
        } else {
			switch(args.button_animate_type) {
				case 'slide' : 
					$('#scroll_to_top').slideUp(args.button_animate_speed);
				break;
				default:
					$('#scroll_to_top').fadeOut(args.button_animate_speed);
			}
        }
		if(check_scroll === 1) {
			if($(this).scrollTop() === 0) {
				if(typeof args.success != "undefined") {
					args.success();
					check_scroll = 0;
				}
			}
		}
	});
	$('#scroll_to_top').click(function() {
		$('body,html').animate({
			scrollTop : args.scroll_location
		}, args.scroll_speed);
		check_scroll = 1;
	});
};

To call the script, put this code in the <head></head> of your body -

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="scroll_to_top.js"></script>
<script type="text/javascript">
$(window).load(function(){ 
	$('body').scroll_to_top({
		image : "jump_to_top.png",
		image_height : "6%",
		image_width : "3%",
		scroll_distance : 200,
		scroll_speed : 600,
		//scroll_location : 50,
		button_animate_speed : 200,
		button_animate_type : 'fade',
		position : 'bottom_left',
		success : function() {
			//alert("Complete");
		}
	});
});
</script>

Just edit the settings as needed.
If you do not pass one of the settings to the script, the default settings will kick in.

Here's the image used, but you can substitute your own - Attachment 4790

Here's a working example.