Advent Calendar – WordPress Editor: Preserve the scroll position

WordPress has a nice editor, with which are several hundreds of articles written daily.

But in my opinion the editor has an usability issue.
Every time you save a post the scroll position of the editor will be on top again. If you want to continue writing the post you have first to find he old position again. This can be time-consuming.

Save editor scroll position on saving

To avoid this behavior I have written a snippet which I want to share now with you.

<?php
/**
 * The class will help you to recover the old scoll position in your Editor.
 * Either HTML or visuel editor.
 */
final class Preserve_Editor_Scroll_Position {
	/**
	 * Init
	 */
	public static function init() {
		add_filter( 'redirect_post_location', array( __CLASS__, 'add_query_arg' ) );
		add_action( 'edit_form_advanced', array( __CLASS__, 'add_input_field' ) );
		add_action( 'edit_page_form', array( __CLASS__, 'add_input_field' ) );
		add_filter( 'tiny_mce_before_init', array( __CLASS__, 'extend_tiny_mce' ) );
	}

	/**
	 * Adds a hidden input field for scrolltop value
	 */
	public static function add_input_field() {
		$position = ! empty( $_GET['scrollto'] ) ? $_GET['scrollto'] : 0;

		printf( '<input type="hidden" id="scrollto" name="scrollto" value="%d"/>', esc_attr( $position ) );

		// Print Javascript data
		add_action( 'admin_print_footer_scripts', array( __CLASS__, 'print_js' ), 55 ); // Print after Editor JS.
	}

	/**
	 * Extend TinyMCE config with a setup function
	 */
	public static function extend_tiny_mce( $init ) {
		if ( 'tinymce' == wp_default_editor() )
			$init['setup'] = 'rich_scroll';

		return $init;
	}

	/**
	 * Returns redirect url with query arg for scroll position
	 */
	public static function add_query_arg( $location ) {
		if ( ! empty( $_POST['scrollto'] ) )
			$location = add_query_arg( 'scrollto', (int) $_POST['scrollto'], $location );

		return $location;
	}

	/**
	 * Prints Javascript data
	 */
	public static function print_js() {
		?>
	<script>
	( function( $ ) {
		$( '#post' ).submit( function() {
			scrollto =
				$( '#content' ).is( ':hidden' ) ?
				$( '#content_ifr' ).contents().find( 'body' ).scrollTop() :
				$( '#content' ).scrollTop();

			$( '#scrollto' ).val( scrollto );
		} );

		$( '#content' ).scrollTop( $( '#scrollto' ).val() );
	} )( jQuery );

	function rich_scroll( ed ) {
		ed.onInit.add( function() {
			jQuery( '#content_ifr' ).contents().find( 'body' ).scrollTop( jQuery( '#scrollto' ).val() );
		} );
	};
	</script>
		<?php
	}
}
add_action( 'plugins_loaded', array( 'Preserve_Editor_Scroll_Position', 'init' ) );

If you want you can create your own plugin with this snippet or you can download the plugin Preserve Editor Scroll Position.

Guest Post

Dominik Schilling AvatarThis post is written by Dominik Schilling - wpgrafie.de and is a post in our Advent Calendar on WP Engineer about WordPress. Dominik is Student, Web Developer, WordPress Contributing Developer - ocean90 and he ♥ WordPress.
Thank you very much from my part to Dominik.
If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

Comments are closed.

11 comments

  1. Oliver Schlöbe

    Killer!

  2. Latz

    ... and why does a plugin has to provide such a behaviour? I think this should be implemented in the core.

  3. Lee

    I think it would also be good if when switching from html view that it also keeps the slider in the same position.

    It can be a pain when fixing anything

  4. Dominik

    Lee,
    this is hard to realize, because both editors have different heights.

  5. Oliver Schlöbe

    @Latz: Care to open a ticket? 🙂

  6. Adam W. Warner

    EXCELLENT idea for a plugin! Thank you so much for making this available to the masses. I serve as the editor for several authors on our site and often am frustrated with scrolling back down to find where I was;)

  7. David Decker

    Thank you for this! Will implement this on my sites as I always got frustrated about this issue! -- Keep up the good work, Dave 🙂

  8. Tim

    This has been one of my hates about working with the editor. It is a huge usability issue. A great idea for a plugin, but can't help think this functionality should be part of the core

    thks

  9. Susan

    And that's why I like Windows Live Writer. Write there and send it over. It just feels better when writing in that window.

2 pingbacks

  1. Adventskalender vom Wochenende und heute « F-LOG-GE
  2. WordPress Adventskalender Tür 9 – Merken der Scrollposition im Artikel-Editor » DER PRiNZ by Michael Oeser