diff --git a/examples/city-list/city-list.sky b/examples/city-list/city-list.sky
index c1ecc67aa8..f89cad77fc 100644
--- a/examples/city-list/city-list.sky
+++ b/examples/city-list/city-list.sky
@@ -599,6 +599,11 @@ SkyElement({
           return;
 
         this.updateView(this.loader.getItems(), true);
+      },
+
+      scrollBy: function(amount) {
+        this.scrollerElement.scrollTop += amount;
+        this.handleScroll({ target: this.scrollerElement });
       }
     });
 
diff --git a/examples/city-list/index.sky b/examples/city-list/index.sky
index 26e51444f6..45cfe145ee 100644
--- a/examples/city-list/index.sky
+++ b/examples/city-list/index.sky
@@ -29,5 +29,21 @@ window.startLoad = new Date().getTime();
 </script>
 <body>
   <city-list></city-list>
+  <script>
+    var cityList = document.querySelector('city-list');
+    var scrollBy = location.search.match(/auto=([0-9]+)/)[1];
+
+    function autoScroll() {
+      cityList.scrollBy(scrollBy);
+      requestAnimationFrame(autoScroll);
+    }
+
+    if (scrollBy) {
+      console.log('Autoscroll by ' + scrollBy);
+      setTimeout(function() {
+        requestAnimationFrame(autoScroll);
+      }, 200)
+    }
+  </script>
 </body>
 </html>
