diff --git a/ghost/admin/templates/posts.hbs b/ghost/admin/templates/posts.hbs
index e48cd9632d..0e5a3e8683 100644
--- a/ghost/admin/templates/posts.hbs
+++ b/ghost/admin/templates/posts.hbs
@@ -11,7 +11,7 @@
{{#link-to "editor.new" class="btn btn-green" title="New Post"}}New Post{{/link-to}}
- {{#view "paginated-scroll-box" tagName="section" classNames="content-list-content"}}
+ {{#view "paginated-scroll-box" tagName="section" classNames="content-list-content js-content-scrollbox"}}
{{#each post in model itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
{{#link-to "posts.post" post class="permalink" title="Edit this post"}}
diff --git a/ghost/admin/views/post-item-view.js b/ghost/admin/views/post-item-view.js
index 275e7049b9..cdda131696 100644
--- a/ghost/admin/views/post-item-view.js
+++ b/ghost/admin/views/post-item-view.js
@@ -13,8 +13,40 @@ var PostItemView = itemView.extend({
click: function () {
this.get('controller').send('showPostContent');
- }
+ },
+ scrollIntoView: function () {
+ if (!this.get('active')) {
+ return;
+ }
+ var element = this.$(),
+ offset = element.offset().top,
+ elementHeight = element.height(),
+ container = Ember.$('.js-content-scrollbox'),
+ containerHeight = container.height(),
+ currentScroll = container.scrollTop(),
+ isBelowTop,
+ isAboveBottom,
+ isOnScreen;
+ isAboveBottom = offset < containerHeight;
+ isBelowTop = offset > elementHeight;
+
+ isOnScreen = isBelowTop && isAboveBottom;
+
+ if (!isOnScreen) {
+ // Scroll so that element is centered in container
+ // 40 is the amount of padding on the container
+ container.clearQueue().animate({
+ scrollTop: currentScroll + offset - 40 - containerHeight / 2
+ });
+ }
+ },
+ removeScrollBehaviour: function () {
+ this.removeObserver('active', this, this.scrollIntoView);
+ }.on('willDestroyElement'),
+ addScrollBehaviour: function () {
+ this.addObserver('active', this, this.scrollIntoView);
+ }.on('didInsertElement')
});
export default PostItemView;