How can I manipulate the UI for this jQuery div scroller? - scrolltop

Question

I'm currently using the following code to scroll up/down text... I'd like to make the following modifications to the code, but am struggling on how to achieve it:
Check the location of the text and affect the opacity of the
up/down arrows. When the content of #scroll is at the top, the up (#scroll-up) arrow would be faded back. When the content of #scroll is at the bottom, the down (#scroll-down) arrow be faded back. Every where in between, both button's would be faded in.
Hide the scroll buttons if they are not needed
Here's the current code:
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').mouseenter(function() {
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down').mouseenter(function() {
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});

Answer 1

Looks like this might do the trick.
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$("#scroll-up").css('opacity', 0.5);
$('#scroll-up').mouseenter(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
$("#scroll-up").css("opacity", (ele.scrollTop() == 0) ? 0.5 : 1);
$("#scroll-down").css("opacity", (ele[0].scrollHeight - ele.scrollTop() == ele.outerHeight()) ? 0.5 : 1);
}, speed);
});
$('#scroll-down').mouseenter(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
$("#scroll-up").css("opacity", (ele.scrollTop() == 0) ? 0.5 : 1);
$("#scroll-down").css("opacity", (ele[0].scrollHeight - ele.scrollTop() == ele.outerHeight()) ? 0.5 : 1);
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
var winHeight = $(window).height();
$("#scroll").css("height", winHeight - 220);
if (ele[0].scrollHeight == ele.outerHeight()){
$("#contentscrollnav").hide();
}
});
$(window).resize(function() {
var winHeight = $(window).height();
$("#scroll").css("height", winHeight - 220);
var ele = $('#scroll');
if (ele[0].scrollHeight <= ele.outerHeight()){
$("#contentscrollnav").hide();
} else if (ele[0].scrollHeight > ele.outerHeight()) {
$("#contentscrollnav").show();
}
});
You can see the code in action at:
http://jsfiddle.net/MzDst/11/