pagination - scroll to top / bottom arrows

public/css/header.less

@@ -18,7 +18,7 @@
 
 
 
-#pagination {
+.pagination-block {
 	position: absolute;
 	background: rgb(34, 34, 34);
 	right: 0px;

public/src/ajaxify.js

@@ -33,7 +33,7 @@ var ajaxify = {};
 		app.enter_room('global');
 
 		pagination = pagination || document.getElementById('pagination');
-		if (pagination) pagination.style.display = 'none';
+		if (pagination) pagination.parentNode.style.display = 'none';
 		window.onscroll = null;
 		// end
 

public/src/app.js

@@ -374,6 +374,18 @@ var socket,
 		});
 	}
 
+	app.scrollToTop = function() {
+		$('body,html').animate({
+			scrollTop: 0
+		});
+	};
+
+	app.scrollToBottom = function() {
+		$('body,html').animate({
+			scrollTop: $('html').height() - 100
+		});
+	}
+
 	app.scrollToPost = function(pid) {
 
 		if(!pid)

public/src/forum/topic.js

@@ -620,16 +620,16 @@
 		postAuthorInfo = postAuthorInfo || document.getElementById('post-author-info');
 		pagination = pagination || document.getElementById('pagination');
 
-		pagination.style.display = 'block';
+		pagination.parentNode.style.display = 'block';
 
 		var windowHeight = jQuery(window).height();
 		var scrollTop = jQuery(window).scrollTop();
 		var scrollBottom = scrollTop + windowHeight;
 
-		if (scrollTop < 50) {
+		if (scrollTop < 50 && postcount > 1) {
 			postAuthorImage.src = (jQuery('.main-avatar img').attr('src'));
 			postAuthorInfo.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html();
-			pagination.innerHTML = '0 / ' + postcount;
+			pagination.innerHTML = '0 out of ' + postcount;
 			return;
 		}
 
@@ -657,9 +657,11 @@
 		    }
 		});
 
-		if(scrollTop + windowHeight == jQuery(document).height()) {
-			pagination.innerHTML = postcount + ' / ' + postcount;
-		}
+		setTimeout(function() {
+			if(scrollTop + windowHeight == jQuery(document).height()) {
+				pagination.innerHTML = postcount + ' / ' + postcount;
+			}
+		}, 100);
 	}
 
 	window.onscroll = updateHeader;

public/templates/header.tpl

@@ -82,7 +82,11 @@
 					</li>
 				</ul>
 
-				<div id="pagination"></div>
+				<div class="pagination-block">
+					<i class="icon-upload pointer" onclick="app.scrollToTop()"></i>
+					<span id="pagination"></span>
+					<i class="icon-upload pointer icon-rotate-180" onclick="app.scrollToBottom()"></i>
+				</div>
 			</div>
 		</div>
 	</div>