0

我有一篇带脚注的文章。脚注位于文章旁边的固定且可滚动的 div 中。它们分为两列（左侧的文章，右侧的脚注）。

我想在文章中指向脚注的锚点和脚注中指向文章的锚点中都有滚动效果。只有带有目标锚的 div 才能滚动。

例如，如果我单击文章中的上标数字，脚注 div 应该滚动并将相关脚注定位在页面顶部。同样，如果我单击脚注编号，则正文应滚动并将相对上标编号定位在页面顶部。

这是 HTML + CSS 的示例：

<div class="article" style="position:relative; left:0px; top:0px; width:50%; height:100%; ">
  <!-- other text -->
  <p>Text <a id="1" href="#1_ref">1</a></p>
  <!-- other text -->
</div>

<div class="footnotes" style="position:fixed; left:50%; top:0px; width:50%; height:100%; overflow:scroll;">
  <!-- several other footnotes -->
  <p><a id="1_ref" href="#1">1</a> Footnote</p>
  <!-- several other footnotes -->
</div>

这是我的 JS：

$(document).ready(function(){
  $("a").on('click', function(event) { 
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    } 
  });
});

当我单击右栏中的锚链接时，左侧会滚动将右锚目标定位在页面顶部。问题是当我做相反的事情时。如果我单击左列上的锚链接，则同一列会向上滚动，然后右列会跳转到锚目标。似乎左列向上滚动了与右列上的锚点目标和同一列顶部的距离相同数量的像素。

有谁知道如何使它工作？

4

0 回答 0