Go to a specific anchor after page resizes (height change only)

Question

I have a one-page website with several anchors (signifying div positions). After the page is resized (change in height only), I want to refresh the page. Then I want to scroll to the anchor the page was previously at, making the window.top position equal to the anchor position. I have javascript for the resize and refresh portion of this (below), but I'm at a loss regarding the scroll portion. Any ideas? How would I check which div the page was on before resizing? "#markerAbout" is one of the anchors.

var height = $(window).height();
var resizeTimer;
$(window).resize(function(){
   if($(this).height() != height){
      height = $(this).height();
      window.location.reload();
      //$(window).scrollTop()=$('#markerAbout').offset().top;   
   }
});

score 0 · Answer 1 · edited May 23 '17 at 12:22

You can find out which of your elements are currently visible on the view port by following the advice in this question: How to tell if a DOM element is visible in the current viewport?

You will have to do this on each element in the order you expect them to appear until you find one that is visible. That should be the current element at the top of the viewport.

function elementInViewport2(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

Once you know which of your divs are showing and which are not, you can choose which one you want to scroll too.

Once you know which div to scroll to for example Div1, you can call scrollIntoView() on that element.

Div1.scrollIntoView();

score 0 · Answer 2 · answered Sep 09 '15 at 04:50

Since you refresh the page, setting a variable is out of the table. My suggestion is to reload the page with a reference of the anchor as hash at the end plus add a function which is fired first thing after page load that check if there's a hash in the url and if so scrolls the page to the anchor wrote in the hash. I added also a function that starts the reloading process after the end of the resizing process only and also another one that iterates through all the anchors (you have to add a class="anchors" to each anchor) and defines which is the one visible. That's the code, hope it helps:

$(document).ready(function(){
if(window.location.hash){
    //Scroll to $(window.location.hash)
}

var height = $(window).height();
var resizeTimer;


$.fn.isOnScreen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    if($(this).height() != height){
        height = $(this).height();
        anchor = false;
        $('.anchors').each(function(){
            if($(this).isOnScreen()){
                anchor = $(this).attr('id')
                return
            }
        });
        window.location.href = window.location.href + anchor;
        window.location.reload(true);
    }
});});

Go to a specific anchor after page resizes (height change only)

2 Answers2