backtotop button

couchpotato/static/scripts/block/navigation.js

@@ -5,7 +5,31 @@ Block.Navigation = new Class({
 	create: function(){
 		var self = this;
 
-		self.el = new Element('ul.navigation');
+		self.el = new Element('div.navigation').adopt(
+			self.nav = new Element('ul'),
+			self.backtotop = new Element('a.backtotop', {
+				'text': 'back to top',
+				'events': {
+					'click': function(){
+						window.scroll(0,0)
+					}
+				},
+				'tween': {
+					'duration': 100
+				}
+			})
+		)
+		
+		new ScrollSpy({
+			min: 400,
+			onLeave: function(){
+				self.backtotop.fade('out')
+			},
+			onEnter: function(){
+				self.backtotop.fade('in')
+			}
+		})
+	
 	},
 
 	addTab: function(tab){
@@ -13,7 +37,7 @@ Block.Navigation = new Class({
 
 		return new Element('li').adopt(
 			new Element('a', tab)
-		).inject(self.el)
+		).inject(self.nav)
 
 	}
 

couchpotato/static/style/main.css

@@ -178,6 +178,8 @@ body > .spinner, .mask{
 	.header .navigation {
 		display: inline-block;
 		width: 75%;
+	}
+	.header .navigation ul {
 		margin: 0;
 		padding: 0;
 	}
@@ -218,6 +220,26 @@ body > .spinner, .mask{
 		.header .navigation li a:hover, .header .navigation li a:active {
 			color: #b1d8dc;
 		}
+		
+		.header .navigation .backtotop {
+			opacity: 0;
+			display: block;
+			width: 80px;
+			left: 50%;
+			position: absolute;
+			text-align: center;
+			margin: -10px 0 0 -40px;
+			background: #4e5969;
+			padding: 5px 0;
+			
+		    border-radius: 0 0 5px 5px;
+		    -moz-border-radius: 0 0 5px 5px;
+		    -webkit-border-radius: 0 0 5px 5px;
+		    color: rgba(255,255,255,.4);
+		    text-shadow: none;
+		    font-weight: normal;
+		}
+			.header:hover .navigation .backtotop { color: #fff; }
 	
 	.header .message.update {
 		text-align: center;