<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>

<button type="submit" id="toggle">toggle 2</button>

$size:7em;

div {
  color:white;
  font-size:$size;
  line-height:$size;
  height:$size;
  text-align:center;
  text-shadow:black 2px 2px 2px;
}
#one {
  background:red;
}
#two {
  background:pink;
}
#three {
  background:orange;
}
#four {
  background:yellow;
}
#five {
  background:violet;
}
.hidden {
  display:none;
}

#toggle {
  top:10px;
  right:10px;
  position:fixed;
}

$(document).ready(function() {
  function isInViewportOrAbove($element, className) {
      var domNode = $element.get(0),
          nodeCoordinates;

      // Node must be rendered on page to get its coordinates
      if (!$element.is(":visible")) {
          $element.removeClass(className);
          nodeCoordinates = domNode.getBoundingClientRect();
          $element.addClass(className);
      } else {
          nodeCoordinates = domNode.getBoundingClientRect();
      }

      return nodeCoordinates.top < $(window).height();
  }

  function compensateScrollDifference(previousDocumentHeight) {
      var currentDocumentHeight  = $(document).height(),
          documentHeightDelta    = previousDocumentHeight - currentDocumentHeight,
          currentScrollPosition  = $(document).scrollTop(),
          newScrollPosition      = currentScrollPosition - documentHeightDelta;

      $('html, body').scrollTop(newScrollPosition);
  }

  function toggleVisibilityWithScrollAdjustment($element, className) {
    var previousDocumentHeight = $(document).height(),
        preToggleScrollPosition = $(document).scrollTop(),
        postToggleScrollPosition,
        isScrollPositionUnchanged;

    $element.toggleClass(className);

    postToggleScrollPosition  = $(document).scrollTop();
    isScrollPositionUnchanged = preToggleScrollPosition === postToggleScrollPosition;

    if (isScrollPositionUnchanged && isInViewportOrAbove($element, className)) {
      compensateScrollDifference(previousDocumentHeight);
    }
  }
  
  //test toggle button
  $('#toggle').on('click', function () {
    toggleVisibilityWithScrollAdjustment($('#two'),'hidden')
    //$('#two').toggleClass('hidden');
  });
});