Tapping view tab scrolls to top

src/components/ha-view-tabs.html

@@ -9,9 +9,9 @@
   <template>
     <paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
       on-iron-select='viewSelected' scrollable=''>
-        <paper-tab data-entity=''>[[locationName]]</paper-tab>
+        <paper-tab data-entity='' on-tap='viewTapped'>[[locationName]]</paper-tab>
         <template is='dom-repeat' items='[[views]]'>
-          <paper-tab data-entity$='[[item.entityId]]'>
+          <paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
             <template is='dom-if' if='[[item.attributes.icon]]'>
               <iron-icon icon='[[item.attributes.icon]]'></iron-icon>
             </template>

src/components/ha-view-tabs.js

@@ -39,6 +39,10 @@ export default new Polymer({
     },
   },
 
+  viewTapped() {
+    this.fire('view-tapped');
+  },
+
   viewSelected(ev) {
     const view = ev.detail.item.getAttribute('data-entity') || null;
     const current = this.currentView || null;

src/layouts/partial-cards.html

@@ -45,7 +45,7 @@
       condenses keep-condensed-header class='fit' has-views$='[[hasViews]]'
       header-height="[[computeHeaderHeight(hasViews)]]"
       condensed-header-height="[[computeCondensedHeaderHeight(hasViews)]]"
-      on-paper-header-transform='headerScrollAdjust'
+      on-paper-header-transform='headerScrollAdjust' id='panel'
       >
       <paper-toolbar>
         <div class='flex layout horizontal' id='menu'>
@@ -65,7 +65,7 @@
 
         <template is='dom-if' if='[[hasViews]]'>
           <div class='fit bottom views'>
-            <ha-view-tabs></ha-view-tabs>
+            <ha-view-tabs on-view-tapped='scrollToTop'></ha-view-tabs>
           </div>
         </template>
       </paper-toolbar>

src/layouts/partial-cards.js

@@ -113,6 +113,28 @@ export default new Polymer({
     this.columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
   },
 
+  scrollToTop() {
+    const scrollEl = this.$.panel.scroller;
+    const begin = scrollEl.scrollTop;
+
+    if (!begin) return;
+
+    const duration = Math.round(begin / 5);
+    let start = null;
+
+    function scroll(timestamp) {
+      if (!start) start = timestamp;
+      const progress = timestamp - start;
+
+      scrollEl.scrollTop = begin - (progress / duration * begin);
+
+      if (progress < duration) {
+        requestAnimationFrame(scroll);
+      }
+    }
+    requestAnimationFrame(scroll);
+  },
+
   handleRefresh() {
     syncActions.fetchAll();
   },