Editing Screen: Make Update or Publish Button Follow The Page

by

The Problem:

I am currently in the finishing stages of a premium theme I’ve been developing and all is mostly well. For pages I have a few custom meta boxes for adding in slideshows and other additional pieces of page content and have found that the editing screen is now pretty long.

Due to the large vertical height you find yourself changing something at the bottom and then having to scroll back to the top to click “publish” or “update”. This gets tiring after editing 2 pages.

(see image below to see the problem first hand, click to enlarge)

enter image description here

The Question:

Is there a way to make the publish/update meta box follow the page so the “publish” and “update” buttons are always accessible and visible without having to scroll all of the way to the top?

3 Answers
3

Solution based in this StackOverflow Q&A.
Well, more a proof of concept than anything… Style and scripts being printed the lazy way.

Add a fixed Scroll to top div linked to an anchor near the Publish button.

add_action( 'admin_head-post.php', 'scroll_to_top' );

function scroll_to_top() 
{
    ?>
    <style>#box {
      /* Position absolutely, 30px down from the top */
      position: absolute;
      top: 30px;

      /* In my case I'm centering it in the window; do what you like */
      margin-left: -100px;
      left: 50%;
      width: 200px;

      /* These are just for my example */
      height: 1.25em;
      border: 1px solid #bbb;
      text-align: center;
    }
    </style>

    <script type="text/javascript">
        jQuery(window).load( function() {   
            jQuery('<div id="box"><a href="#top">Scroll to top</a></div>').appendTo("#wpbody-content");         
            jQuery('<a name="top" id="top"></a>').appendTo("#visibility");

            function getScrollTop() {
            if (typeof window.pageYOffset !== 'undefined' ) {
              // Most browsers
              return window.pageYOffset;
            }

            var d = document.documentElement;
            if (d.clientHeight) {
              // IE in standards mode
              return d.scrollTop;
            }

            // IE in quirks mode
            return document.body.scrollTop;
          }

          window.onscroll = function() {
            var box = document.getElementById('box'),
                scroll = getScrollTop();

            if (scroll <= 28) {
              box.style.top = "30px";
            }
            else {
              box.style.top = (scroll + 2) + "px";
            }
          };
        });

    </script>
    <?php
}

Leave a Comment