Question

我不完全确定怎么说这个，所以请耐心等待。

我在页面上有一张地图，上面有很多符号。每个符号都包含在带有CSS的<div>标记内，以支持在地图上的位置放置此符号。

我有一个简单的搜索页面，该页面根据id标记的<div>链接到所有这些符号。

<div class="poi" id="poi1">
    <img src="poi1.jpg" />
</div>

我知道要转到该元素，我只需要链接就像http://localhost/map#poi1

到目前为止，我知道在点击或手动输入此类网址时，该元素通常会显示在右上角或其他位置。

我想知道的是，在点击超链接或手动输入网址时，是否有办法让该元素显示在屏幕中央？

我并不是想让符号出现在屏幕中央，就好像它是浮动的一样。我要做的是让它好像用户已滚动到地图的那一部分来查看符号，使其接近屏幕的中心。

我忘了提及id是每页数百个，并且是动态生成的。

Answer 1

这可以使用javascript完成。这是一个例子。我在JS片段中添加了评论。

＆＃13;

// Add a method to get the position of the element from the top of the page.

Element.prototype.documentOffsetTop = function () {
    return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 );
};

var element = document.getElementById('para');

// Add an event listener for click on the libk
document.querySelector('.link').addEventListener('click', function(e) {
  
// variable top = (position of element from top) -  (half the height of window). This bit makes it so that the element appears in the center.
var top = document.getElementById('para').documentOffsetTop() - (window.innerHeight / 2);

// Remember that the above code makes it so that the top of the element is in center of the document. If you want the center of the element to be in the center, do this:

// var top = element.documentOffsetTop() - (window.innerHeight / 2) + (element.clientHeight / 2);
             
  // prevent the default action of the libk
  e.preventDefault();
  
    // Simply scroll to the position on click. 
      window.scrollTo(0, top);
})

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.some, .some2 {
  height: 500px;
  border: 1px solid black;
  width: 500px;
  margin-bottom: 100px;
}

＆＃13;

<div class="some">some text

  <a href="#para" class="link">Go to para</a>
</div>

<div class="some2">
  <p id="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet mollitia totam molestiae, enim corrupti facere aliquam odio cumque laborum ipsa, dolores voluptates quaerat, soluta provident itaque doloremque consequatur ratione? Fugit.</p>
</div>

＆＃13;

编辑：以下是如何为不同的网页执行相同的任务。我试过一个纯粹的JS解决方案，但出于某种原因，window.scrollTo不会在页面加载时触发。所以，我使用jQuery。

显然，这些代码需要包含在两个页面中。或者您可以在目标页面中包含检查部分，然后单击源页面中的功能。

$(document).ready(function () {

    // Check if the # exists in the url
    if(window.location.hash) {

        // Get the position like in the javascript snippet above
        var scrollPoint = $(window.location.hash).offset().top - 
        (window.innerHeight / 2);

        // jump to that element
        $(window).scrollTop(scrollPoint);
    }

    $('.link').click(function (e) {

        e.preventDefault();

        // Redirect to the link
        window.location.href = this.attr('href');
    }); 
});

如何使元素从链接显示在屏幕中央？

1 个答案: