Advanced Search

View RSS Feed

keyboard

Scroll to Top Script

Rate this Entry
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.

Submit "Scroll to Top Script" to del.icio.us Submit "Scroll to Top Script" to StumbleUpon Submit "Scroll to Top Script" to Google Submit "Scroll to Top Script" to Digg

Tags: javascript Add / Edit Tags
Categories
Uncategorized

Comments