scroll only if needed

src/main/webapp/js/directives.js

@@ -11,21 +11,31 @@ app.directive('ngBlur', function() {
 	};
 });
 
-module.directive('scrollTo', function() {
+module.directive('scrollTo', function($timeout) {
 	return {
 		restrict : 'A',
-		controller : function($scope, $element, $attrs) {
-
-		},
 		link : function(scope, element, attrs) {
 			scope.$watch(attrs.scrollTo, function(value) {
-				if (value) {
-					var offset = parseInt(attrs.scrollToOffset, 10);
-					var scrollTop = $(element).offset().top + offset;
-					$('html, body').animate({
-						scrollTop : scrollTop
-					}, 0);
-				}
+				if (!value) 
+					return;
+				$timeout(function() {
+					var docTop = $(window).scrollTop();
+				    var docBottom = docTop + $(window).height();
+				    
+				    var elemTop = $(element).offset().top;
+				    var elemBottom = elemTop + $(element).height();
+				    
+				    if ((elemTop > docTop) && (elemBottom < docBottom)) {
+				    	// element is entirely visible
+				    	return;
+				    } else {
+				    	var offset = parseInt(attrs.scrollToOffset, 10);
+				    	 var scrollTop = $(element).offset().top + offset;
+				    	 $('html, body').animate({
+				    		 scrollTop : scrollTop
+				    	 }, 0);
+				    }
+				});
 			});
 		}
 	};

src/main/webapp/templates/feeds.view.html

@@ -5,8 +5,8 @@
 	</div>
 	
 	<div infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy || !settingsService.settings.readingMode" infinite-scroll-distance="1" id="feed-accordion">
-		<div ng-repeat="entry in entries" class="entry">
-			<a scroll-to="isOpen && current == entry" scroll-to-offset="-58" href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="entryClicked(entry, $event)" 
+		<div ng-repeat="entry in entries" class="entry" scroll-to="isOpen && current == entry" scroll-to-offset="-58">
+			<a href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="entryClicked(entry, $event)" 
 				ng-class="{open: current == entry, closed: current != entry}">
 				<span ui-if="keywords || selectedType == 'category'" class="feed-name">{{entry.feedName}}</span>
 				<span class="entry-date">{{entry.date}}</span>