Opinions on a scroll_to_top script I made [Archive]

View Full Version : 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 (http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm).

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

<!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>
 
</body>
</html>

The image -
4790

keyboard

10-07-2012, 05:59 AM

I've now changed it slightly ---

scroll_to_top.html

<!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>
 
</body>
</html>

scroll_to_top.js

$.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

Because I don't have a web host at the moment.
make a fiddle (http://jsfiddle.net/d5pfz/).

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:
$.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... */

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:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFMklEQVR4nO2cT2xURRzHv/Pm7b5ut5RWWmgL2+027W7/0z/bdoUISf9p0USEVog1sfFC4olET3jhxMWLHjiYGGOMIUaBeEESDIgHCLFIovyJ/EtxRQuVFKHdf93dNx66VBp2WWY7b98D5nPrZvY3v3ze/GZnZ6ZLkIHNW8eZ29eG4tJyEEXJ1OyZQU8mcW9mGpOXzuHUkQMkXZtHXhx4cxfzNHWioLDI+AwtSmTuPq5dmMDJw58v8bPkj52797GyymoQklbscwVjOm4Hr+Pb/XsXZSzW187d+1h5lVuKSkGIggp3Pd7Y9SF78JoCLJReWWW1eZlZmLWeBmx+/R0GpGR5mjrliMoAURTUtvgBAHTz1nG2trbR5JSsjU0rAAj2Km5fm9m5WB5CCKq9bVCKS8vNzuWpoMDhhPI8LDhFIU1xIGVxIGVxIGVxIGVxIGVxIGVxIGVxoIoKpNlVS34ZZ4whNp8QEkuILKfDjpF+P1Y4HSLCC WU2FMHB42cRiswvO5YQWSqlqKkqw6qV1tuKnrk3B5VSIbHknMWBlMWBkDLUdR0z90LQdZa9cZ75dzYMXdeFxBIiazYcw/5vTqQ5WLMADNCZmIcobOmgMwZYb2AJxXJz1opCDYO9TdDswp6jMCyVUWlxIcaGA/BWV6CyrAQHj59FOLr89ZEoLCPrhWIn3hruRZ1rDQCgo2HhZPzg8QkhC0oRWKIMiwo1jG0JoG7dGiipr0xUUdDudWGkvxuazRrP1PQsVhY5MDYcQH1qRD0MpQq6Gt1IJJM4fOIXRGJxEzL8H1NHltOhYcdQD3zuis e26272YMdQD5wOLU+Zpcc0WQ7NhtEBPxprKrPuViiEYH29C6MDfjg0W54yTJOHGZ1qNhXb+rrQ7qsGpU+WAqUK2n3V2NbXZdoclvdenQV2jAz40dVYw/1ehRD0ttRCpdSUT8m8jqzClKh27/KuN7V7Xdje54fdJmbr5UnJmyzNrmKk389VepmgdGFZ8XKgBeoyY/GQlzJ0aHZs7++Cv6lGWExVpRgMNENnDMfOXEQ8kRQWO2OfRnfgdGgY6e9Ch8+Ym4UDPU2wqRTfnzqP+biYvfZMGDqGNbuK0dQcpRh0W4dSBS91eDG8odXwkjQs+oM5qkPAHJUNm0rR192Awd5mQ4UZUoZOh4bRgQ VR+ToeI4TglQ0tsNtUHD1tTEkKfwx2lWLLxlasr3fl/RyREIJNnV5s2dgKuyp+WSFUlkoVDAaa8WJbneGllwmbSrGp04fBgPiSFFqGjZ5K1LlW44+pO4/vlFK4K1fl1Ec8kcRf03eRzHIIUedajeCtKpy/djOnftIhVNbvN27hanA6a7uSFYXY8+6rOfUxF47iyyOnMReOZW2bTSgvQmXFE0nEkX1xGJvPfV+KMSA6H0d0GTFyxRI7pU8LUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHUhYHppyDMyDno6tE0vgj r0yYImsuHMWnh07m9N54IolI1JyrR6bISiR1XAneNqPrZSHnLA6kLA6kLA4UJnhT/1lGmbt/1+wcngqikRCUyUvnzM7D8jDGELzyG5SfvvuCxCIhs/OxNNHQLH7+4TBRAODPqxfBBP3n1LMGYzquX5gAkPo0PPrVJ+TuP1OmJmVVpm9O4sfUr0ouueby9gcfsZLy7PfSnwcYY7gzFcTXH+9ZlPGIldfG32dVHh80hzO/2VmIWCSEG5d/xbED+zP/TunDDO18j61e5zE+M4vx9+RlnDj0WVov/wEGuUVdoh/ylgAAAABJRU5ErkJggg==">
see it in action (http://jsfiddle.net/d5pfz/1/)

djr33

10-08-2012, 02:37 AM

Keyboard-- ok, I see that now. Seems fine. What about a jump to top (immediate) option? Just use href="#", I think.

traq-- that's fun but is it the best idea to include that in the script itself? For testing here I suppose. But I'm not sure about whether it's best to have that load each time in the JS, especially if they're not using the default image. If so, I'd suggest making a much smaller filesize image-- probably a more basic graphic that takes up less space (eg, take out all of the black from that and it'll go down significantly). But that's being picky-- it's only 5kb (though some people do care about that).

traq

10-08-2012, 02:56 AM

base64-encoded, the image is 1.9kb. That's compared to 1.4kb as a png file - but then, your browser has to send a second http request to get it. The headers for the second request will make up for the half a kb you save, plus it's slower because you're making two round trips to the server instead of one. The decode/render time is about the same either way.

As you say, there are ways to reduce the image size - compression, not using a 24bit png, and so forth. And since this image isn't needed right away under *any* circumstances (not needed until after DOMready + 200px scroll), I'd agree that there's no real advantage.

...For testing here I suppose.
You hit the nail on the head, there: for the demo page, I didn't want to hotlink the image from google search.

----------------------------------------------------------------

A thought: you could simplify the positioning assignment by figuring the css first, and just adding it to the <img> tag when you append it (instead of accessing it with another jQuery object later). Same with your other css:
switch(args.position) {
case 1:
var css = "top: 0; left: 0;"; break;
case 2:
var css = "top: 0, right: 0;"; break;
/* you can actually leave this out, since it's the same as your default case.
case 3:
var css = "bottom: 0, left: 0;"; break; */
case 4:
var css = "bottom: 0, right: 0;"; break;
default:
var css = "bottom: 0, left: 0;"; break;
}
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('<image src="' + args.image + '" alt="Scroll to top" title="Scroll to top" id="scroll_to_top" style="' + css + '">');

keyboard

10-08-2012, 08:53 AM

Hmmm... Traq, after some testing

Current javascript file -

$.fn.fldr_scroll_to_top = function() {
var args = arguments[0] || {};
var defaultOptions = {
image : "jump_to_top.png",
image_height : "6%",
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 : 'bottom_left'
};
if(typeof args === 'object'){
$.extend(defaultOptions,args);
}
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;
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('<image 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) {
$('#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);
});
};

If I remove scroll_distance : 200, //Distance in pixels you have to scroll down the page before the button appears from

<script type="text/javascript">
$(window).load(function(){
$('body').fldr_scroll_to_top({
image : "jump_to_top.png",
image_height : "6%",
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 : 'bottom_left'
});
});
</script>

It doesn't work (nothing show's up).
How come the default-y thing isn't working?

Keyboard-- ok, I see that now. Seems fine. What about a jump to top (immediate) option? Just use href="#", I think.

Ummm... you can just change scroll_speed to 0

djr33

10-08-2012, 10:35 AM

Ummm... you can just change scroll_speed to 0 Ok, that'll be useful for someone, I'm sure-- probably someone who doesn't realize you can just link to href="#", but there are bound to be a few people out there who that simple option helps.

keyboard

10-08-2012, 11:04 AM

And you have to link to #top not # to Jump to the top

djr33

10-08-2012, 11:40 AM

<a href="#">TOP</a>Works for me in FF. And no target anchor required.
Maybe it's not reliable in all browsers?

I discovered it a while ago by accident; and to the extent that I've needed something like this it has worked-- but I've never needed it in more than FF. It was just convenient for a couple small personal projects.

traq

10-08-2012, 02:15 PM

Hmmm... Traq, after some testing
It doesn't work (nothing show's up).
How come the default-y thing isn't working?

sorry - I'll fix my original post as well

$.fn.fldr_scroll_to_top = function( userOptions ) {
var defaultOptions = {
image : "jump_to_top.png",
image_height : "6%",
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 : '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;
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('<image 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) {
$('#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);
});
};
demo (http://jsfiddle.net/d5pfz/6/)

jscheuer1

10-08-2012, 02:44 PM

Just saw this:

$('body').append('<image src=" . . .

That's a valid HTML tag in at least some browsers, for wider compatibility, use img.

keyboard

10-08-2012, 08:46 PM

Thanks for picking that up John!

Traq; thanks again!

Daniel; really? I though you always has to put the top after it... I'll check it later.

keyboard

10-09-2012, 09:10 AM

Incase anyone wants it (full 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="FLDR_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("bobbbbb");
}
});
});
</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>
 
</body>
</html>

$.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;
});
};

Daniel - Yep, you're right (you can just use #)

djr33

10-09-2012, 08:18 PM

Daniel - Yep, you're right (you can just use #) Did you test it widely? I'm curious if that always works or is supposed to always work-- or if I just found a coincidence in firefox.

keyboard

10-09-2012, 08:57 PM

It works in IE9
I'll check on chrome a bit later