Кнопка «наверх» – мелочь, а удобно, реализация на Prototype.js

<div class="toTop" id="toTop">
	<div class="toTopPanel" id="ttPanel">
		<img src="images/scrollTop.gif" width="40" height="40" class="toTopButton" id="ttButton">
		<img src="images/scrollBack.gif" width="40" height="40" class="toTopBack" id="ttBackButton">
	</div>
</div>

.toTop {
    bottom: 0;
    display: none;
    left: 0;
    display:block;
    position: fixed;
    top: 0;
    width: 40px;
    height: 100%;
    opacity:0.5;
}
.toTop:hover {
	opacity:1;
}
.toTop .toTopPanel {
    height: 100%;
    background:transparent;
    cursor: pointer;
}
.toTop .toTopPanel:hover {
	background: none repeat scroll 0 0 #dfdfcc;
}
.toTop .toTopButton, .toTop .toTopBack  {
	position: absolute;
	top:50%;
}

var toTop = Class.create();
toTop.prototype = {
	initialize: function(params) {
		// значения по умолчанию
		this.min = 200;
		this.max = 600;
		this.brakingDistance = 20;
		this.scrollDuration = '0.1';
		// поехали
		Object.extend(this, params);
		var that = this;
		this.holder = $(this.holder);
		this.lastPosition = false;
		['ttPanel', 'ttButton', 'ttBackButton'].each(function(name) {
			that[name] = that.getById(name);
		});
		this.ttPanel.observe('click', this.scroll.bindAsEventListener(this));
		this.panelBehavior();
		Event.observe(window, 'scroll', this.panelBehavior.bindAsEventListener(this));
		// шаман-маман
		this.ttPanel.observe('mouseover', function(){
			that.ttButton.setStyle({opacity:''});
			that.over = true;
		});
		this.ttPanel.observe('mouseout', function(){
			that.panelBehavior();
			that.over = false;
		});
	},
	
	// получить элемент по id внутри holder
	getById: function(name) {
		return (el = this.holder.select('[id="'+name+'"]')) ?  el[0] : false;
	},

	// упаравление поведением панели
	panelBehavior: function () {
		var scrOffst = document.viewport.getScrollOffsets(),
			top = scrOffst.top,
			bb = this.ttBackButton,
			tb = this.ttButton;
		if (top < this.min) {
			if (this.lastPosition) {
				bb.show();
				tb.hide();
			} else
				this.ttPanel.hide();
			return;
		}
		this.lastPosition = false;
		bb.hide();
		tb.show();
		if ((top < this.max) && !this.over) 
			tb.setOpacity((1 - (this.max - top)/(this.max - this.min)));
		else
			tb.setStyle({opacity:''});
		this.ttPanel.show();
	},

	// прокрутка вверх/вниз
	scroll: function() {
		var scrOffst = document.viewport.getScrollOffsets(),
			top = scrOffst.top,
			body = $$('body')[0],
			st = Effect.ScrollTo,
			dr = this.scrollDuration,
			lp = this.lastPosition,
			bd = this.brakingDistance;
		// скролл с "доводкой"
		if ((top < this.min) && this.lastPosition) {
			st(body, {duration:0, offset: (lp - bd), afterFinish:function(){
				st(body, {duration:dr, offset: lp});
			}});
		} else {
			st(body, {duration:0, offset:bd, afterFinish:function(){
				st(body, {duration:dr});
			}});
			this.lastPosition = top;
		}
	}
};