Нужна небольшая помощь в модификации скрипта

[enselerizer]

Всем привет!
Нужна небольшая помощь в модификации скрипта.

Что уже имеется:

$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});

(скрипт для прокрутки страницы)

Задача:
При клике сменить картинку (добавить в css строчку), а при достижении верха страницы поставить исходную картинку обратно (убрать строчку).

Что должно получиться:
При клике на картинки и прокрутке наверх картинка меняется, при достижении верха картинка исчезает, при прокрутке вниз картинка опять исходная.

Жду помощи, зарание спасибо...

[animhotep]

$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
         $('куда добавить').css('background':' image-url(image.png);')
		});
	});

});

остальные действия по тому же принципу

[enselerizer]

Спасибо большое!

[enselerizer]

Хм, попробовал вот так:

$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
			$('#back-top span').css('background':' #ddd url(up-arrow2.png) no-repeat center center;');
		});
	});

});

В итоге картинка перестала исчезать при прокрутке наверх, а стиль не изменяется.
Ах да, и прокрутка стала не плавной, а рывком,