javascript - 调整页面大小后转到特定 anchor (仅限高度变化)

Question

我有一个包含多个 anchor (表示 div 位置)的单页网站。调整页面大小后(仅更改高度)，我想刷新页面。然后我想滚动到页面之前所在的 anchor ，使 window.top 位置等于 anchor 位置。我有用于调整大小和刷新部分(如下)的 javascript，但我对滚动部分不知所措。有任何想法吗？在调整大小之前，我如何检查页面所在的 div？ “#markerAbout”是 anchor 之一。

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

Answer 1

您可以按照此问题中的建议找出哪些元素当前在视口(viewport)上可见: How to tell if a DOM element is visible in the current viewport?

您必须按照您希望它们出现的顺序对每个元素执行此操作，直到找到一个可见的元素。那应该是视口(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
  );
}

一旦您知道哪些 div 正在显示，哪些没有显示，您就可以选择要滚动的那个。

一旦您知道要滚动到哪个 div(例如 Div1)，您就可以对该元素调用 scrollIntoView()。

Div1.scrollIntoView();