diff --git a/src/lib/picker/picker.component.ts b/src/lib/picker/picker.component.ts
index d91494ef..cdb40c77 100644
--- a/src/lib/picker/picker.component.ts
+++ b/src/lib/picker/picker.component.ts
@@ -60,7 +60,7 @@ export class PickerComponent implements OnInit, AfterViewInit {
   @Input() emoji = 'department_store';
   @Input() color = '#ae65c5';
   @Input() hideObsolete = true;
-  /** all categories */
+  /** all categories shown */
   @Input() categories: EmojiCategory[] = [];
   /** used to temporarily draw categories */
   @Input() activeCategories: EmojiCategory[] = [];
@@ -276,7 +276,14 @@ export class PickerComponent implements OnInit, AfterViewInit {
     } else {
       const target = this.scrollRef.nativeElement;
       // check scroll is not at bottom
-      if (target.scrollHeight - target.scrollTop !== this.clientHeight) {
+      if (target.scrollTop === 0) {
+        // hit the TOP
+        activeCategory = this.categories.find(n => n.first === true);
+      } else if (target.scrollHeight - target.scrollTop === this.clientHeight) {
+        // scrolled to bottom activate last category
+        activeCategory = this.categories[this.categories.length - 1];
+      } else {
+        // scrolling
         for (const category of this.categories) {
           const component = this.categoryRefs!.find(n => n.id === category.id);
           const active = component!.handleScroll(target.scrollTop);
@@ -284,9 +291,6 @@ export class PickerComponent implements OnInit, AfterViewInit {
             activeCategory = category;
           }
         }
-      } else {
-        // scrolled to bottom activate last category
-        activeCategory = this.categories[this.categories.length - 1];
       }
 
       this.scrollTop = target.scrollTop;