Editing Screen: Make Update or Publish Button Follow The Page

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