Opinions on a scroll_to_top script I made

**keyboard** · 10-07-2012, 04:16 AM

Hey guys,
I'm just starting to really look into jquery and I made this simple script that's similar to this one on DD.

Can I get some opinions on it (things that don't work, improvements, etc.)

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	settings = {
		image : "jump_to_top.png",
		image_height : "5%",
		image_width : "3%",
		scroll_distance : 200, //Distance in pixels you have to scroll down the page before the button appears
		scroll_speed : 600, //Milliseconds
		fade_speed : 200, //Milliseconds
		position : 3
	};
	$('body').append('<image src="' + settings.image + '" alt="Scroll to top" title="Scroll to top" id="scroll_to_top"/>');
	switch(settings.position) {
		case 1:
			$('#scroll_to_top').css({'top' : '0', 'left' : '0'});
		break;
		case 2:
			$('#scroll_to_top').css({'top' : '0', 'right' : '0'});
		break;
		case 3:
			$('#scroll_to_top').css({'bottom' : '0', 'left' : '0'});
		break;
		case 4:
			$('#scroll_to_top').css({'bottom' : '0', 'right' : '0'});
		break;
		default:
			$('#scroll_to_top').css({'bottom' : '0', 'left' : '0'});
	}
	$('#scroll_to_top').css({'margin-bottom' : '5px', 'margin-top' : '5px', 'margin-left' : '5px', 'margin-right' : '5px', 'display' : 'none', 'position': 'fixed', 'height' : settings.image_height, 'width' : settings.image_width, 'cursor' : 'pointer'});
	$(window).scroll(function() {
		 if ($(this).scrollTop() > settings.scroll_distance) {
            $('#scroll_to_top').fadeIn(settings.fade_speed);
        } else {
            $('#scroll_to_top').fadeOut(settings.fade_speed);
        }
	});
	$('#scroll_to_top').click(function() {
		$('body,html').animate({
				scrollTop: 0
		}, settings.scroll_speed);
	});
});
</script>
<style type="text/css">
body {
	background-image:url('http://www.freeimageslive.com/galleries/sports/music/pics/spectrum_analyser.jpg');
	background-size:50% 50%;
}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

The image -

Click image for larger version.

Name: jump_to_top.jpg
Views: 1649
Size: 4.5 KB
ID: 4790

**keyboard** · 10-07-2012, 05:59 AM

I've now changed it slightly ---

scroll_to_top.html

HTML Code:

<!DOCTYPE html>
<html>
<head>
<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').fldr_scroll_to_top({
			image : "jump_to_top.png",
			image_height : "5%",
			image_width : "3%",
			scroll_distance : 200, //Distance in pixels you have to scroll down the page before the button appears
			scroll_speed : 600, //Milliseconds
			fade_speed : 200, //Milliseconds
			position : 3
	});
});
</script>
<style type="text/css">
body {
	background-image:url('http://www.freeimageslive.com/galleries/sports/music/pics/spectrum_analyser.jpg');
	background-size:50% 50%;
}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

scroll_to_top.js

Code:

$.fn.fldr_scroll_to_top = function() {
    var args = arguments[0] || {};
	$('body').append('<image src="' + args.image + '" alt="Scroll to top" title="Scroll to top" id="scroll_to_top"/>');
	switch(args.position) {
		case 1:
			$('#scroll_to_top').css({'top' : '0', 'left' : '0'});
		break;
		case 2:
			$('#scroll_to_top').css({'top' : '0', 'right' : '0'});
		break;
		case 3:
			$('#scroll_to_top').css({'bottom' : '0', 'left' : '0'});
		break;
		case 4:
			$('#scroll_to_top').css({'bottom' : '0', 'right' : '0'});
		break;
		default:
			$('#scroll_to_top').css({'bottom' : '0', 'left' : '0'});
	}
	$('#scroll_to_top').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'});
	$(window).scroll(function() {
		 if ($(this).scrollTop() > args.scroll_distance) {
            $('#scroll_to_top').fadeIn(args.fade_speed);
        } else {
            $('#scroll_to_top').fadeOut(args.fade_speed);
        }
	});
	$('#scroll_to_top').click(function() {
		$('body,html').animate({
				scrollTop: 0
		}, args.scroll_speed);
	});
};

**jscheuer1** · 10-07-2012, 08:55 AM

Why not put a demo of it up somewhere and give us a link to it so we can try out?

**keyboard** · 10-07-2012, 09:08 AM

Because I don't have a web host at the moment.
I gave you eveything necessary to try it out.

**traq** · 10-07-2012, 11:31 PM

Originally Posted by keyboard1333

Because I don't have a web host at the moment.

make a fiddle.

**keyboard** · 10-07-2012, 11:52 PM

Thanks traq!
Now will someone try it?

**djr33** · 10-08-2012, 12:42 AM

It seems fine to me. It does what it's supposed to do, right?
It's not a very complex script from a user interaction perspective, but I guess the one piece you'd want to think about is the speed of scrolling. Depending on the website you might want it to go slowly or quickly, or perhaps just jump right to the top-- but for that you can just use an anchor.
I don't have much more to say about it than that. It should work fine when needed. I didn't test it thoroughly across many browsers, but it works in FF for Mac.

**traq** · 10-08-2012, 12:50 AM

Also, instead of having to pass options on every invocation, you might try something like this:

Code:

$.fn.fldr_scroll_to_top = function( userOptions ){
    /* whatever you want the default settings to be. */
    var defaultOptions = {
        image : "jump_to_top.png",
        image_height : "5%",
        image_width : "3%",
        scroll_distance : 200,
        scroll_speed : 600,
        fade_speed : 200,
        position : 3
    };
    /* if the user passes an object, 
        its properties will overwrite the default properties of the same name. 
        This also makes it easy to override only one or two options,
        and leave the others with their default values. */
    if( typeof userOptions === 'object' ){ var args = $.extend( defaultOptions,userOptions ); }
    else{ var args = defaultOptions; }

/* continue as normal... */

Edit:

I might also suggest "user-friendly" keywords instead of numeric values for the position option.

BTW, I like how the animation uses a set interval (i.e., it takes n milliseconds to scroll to the top, regardless of the vertical distance you're covering), but I can imagine some users might want to be able to set a specific scrolling speed.

**keyboard** · 10-08-2012, 12:56 AM

Daniel, when initializing it, one of the options is the scroll speed.
But thanks for the feedback!

Traq, thanks; I'll look into it.

**traq** · 10-08-2012, 01:08 AM

a bit of fun: you can put this (the src value) in your defaultOptions.image property and do away with the external image like so:

HTML Code:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFMklEQVR4nO2cT2xURRzHv/Pm7b5ut5RWWmgL2+027W7/0z/bdoUISf9p0USEVog1sfFC4olET3jhxMWLHjiYGGOMIUaBeEESDIgHCLFIovyJ/EtxRQuVFKHdf93dNx66VBp2WWY7b98D5nPrZvY3v3ze/GZnZ6ZLkIHNW8eZ29eG4tJyEEXJ1OyZQU8mcW9mGpOXzuHUkQMkXZtHXhx4cxfzNHWioLDI+AwtSmTuPq5dmMDJw58v8bPkj52797GyymoQklbscwVjOm4Hr+Pb/XsXZSzW187d+1h5lVuKSkGIggp3Pd7Y9SF78JoCLJReWWW1eZlZmLWeBmx+/R0GpGR5mjrliMoAURTUtvgBAHTz1nG2trbR5JSsjU0rAAj2Km5fm9m5WB5CCKq9bVCKS8vNzuWpoMDhhPI8LDhFIU1xIGVxIGVxIGVxIGVxIGVxIGVxIGVxoIoKpNlVS34ZZ4whNp8QEkuILKfDjpF+P1Y4HSLCCWU2FMHB42cRiswvO5YQWSqlqKkqw6qV1tuKnrk3B5VSIbHknMWBlMWBkDLUdR0z90LQdZa9cZ75dzYMXdeFxBIiazYcw/5vTqQ5WLMADNCZmIcobOmgMwZYb2AJxXJz1opCDYO9TdDswp6jMCyVUWlxIcaGA/BWV6CyrAQHj59FOLr89ZEoLCPrhWIn3hruRZ1rDQCgo2HhZPzg8QkhC0oRWKIMiwo1jG0JoG7dGiipr0xUUdDudWGkvxuazRrP1PQsVhY5MDYcQH1qRD0MpQq6Gt1IJJM4fOIXRGJxEzL8H1NHltOhYcdQD3zuise26272YMdQD5wOLU+Zpcc0WQ7NhtEBPxprKrPuViiEYH29C6MDfjg0W54yTJOHGZ1qNhXb+rrQ7qsGpU+WAqUK2n3V2NbXZdoclvdenQV2jAz40dVYw/1ehRD0ttRCpdSUT8m8jqzClKh27/KuN7V7Xdje54fdJmbr5UnJmyzNrmKk389VepmgdGFZ8XKgBeoyY/GQlzJ0aHZs7++Cv6lGWExVpRgMNENnDMfOXEQ8kRQWO2OfRnfgdGgY6e9Ch8+Ym4UDPU2wqRTfnzqP+biYvfZMGDqGNbuK0dQcpRh0W4dSBS91eDG8odXwkjQs+oM5qkPAHJUNm0rR192Awd5mQ4UZUoZOh4bRgQVR+ToeI4TglQ0tsNtUHD1tTEkKfwx2lWLLxlasr3fl/RyREIJNnV5s2dgKuyp+WSFUlkoVDAaa8WJbneGllwmbSrGp04fBgPiSFFqGjZ5K1LlW44+pO4/vlFK4K1fl1Ec8kcRf03eRzHIIUedajeCtKpy/djOnftIhVNbvN27hanA6a7uSFYXY8+6rOfUxF47iyyOnMReOZW2bTSgvQmXFE0nEkX1xGJvPfV+KMSA6H0d0GTFyxRI7pU8LUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHppyDMyDno6tE0vgjr0yYImsuHMWnh07m9N54IolI1JyrR6bISiR1XAneNqPrZSHnLA6kLA6kLA4UJnhT/1lGmbt/1+wcngqikRCUyUvnzM7D8jDGELzyG5SfvvuCxCIhs/OxNNHQLH7+4TBRAODPqxfBBP3n1LMGYzquX5gAkPo0PPrVJ+TuP1OmJmVVpm9O4sfUr0ouueby9gcfsZLy7PfSnwcYY7gzFcTXH+9ZlPGIldfG32dVHh80hzO/2VmIWCSEG5d/xbED+zP/TunDDO18j61e5zE+M4vx9+RlnDj0WVov/wEGuUVdoh/ylgAAAABJRU5ErkJggg==">

see it in action