Jquery 锚链计算错误扩展布局

我在一个一页的网站上工作，其中各种内容位于不同的垂直扩展分区中。当扩展一个div时，任何已经打开的div都会自动关闭，我还希望该页面能够滚动，以便特定的内容能够在浏览器顶部以90px的速度定位

通过为每个div使用一个简单的锚定链接，这在大多数情况下都是完美的。然而，随着扩展内容增加了网站的高度，锚定有时会错误地计算“停止点”，用户被滚动到错误的位置。特别是当从一个已经打开的div直接扩展另一个div时。我在一个问题中读到，当在布局中使用锚定链接时，有时会出现这种情况。有人知道如何解决这个问题吗？是否有一种方法可以“绝对”滚动新内容相对于视口顶部的位置？或者可以要求锚有点耐心，在起飞前等待所有内容加载

此外，为了防止移动和小屏幕上的访问者必须加载全尺寸图像，jquery检查访问者的屏幕大小，并将相应的html文件和正确的图像加载到

#picswitend

中。这可能是问题的一部分吗

下面是一个扩展div的代码。这是我第一次尝试jQuery，所以我想它可能有点不精确，但它是有效的

CSS:

中的代码：

开放=''；
主动=''；
$（文档）.ready（函数（）{
$（'#closeinfo'）.hide（）；
$（“#关闭此”）.hide（）；
$（“#常见问题”）.hide（）；
$（'#infomore'）.hide（）；
$（'witsend'）.hide（）；
});

其中一个扩展div的示例：

  <div class="text">
  <a name="witsendlink" class="anchorlink"></a>
  <a href="#witsendlink" id="witsend-show">
  <script>
     $("#witsend-show").click(function() {      
        $('#' + active).hide();
        $('#' + active + '-show').show();
        $('#infomore').slideUp(200);
        $('#witsend-show').hide();
        $('#witsend').show();
        active = "witsend";
    $('#closethis').show();
    $('#faq').hide();

    if($(this).width() <= 568){
       $("#picswitsend").load("witsendpicsm.html");
    } else {
       $("#picswitsend").load("witsendpics.html");
    }

    $('#witsendtitle').scrollToFixed({
       marginTop: $('#top').outerHeight() - 44,
       limit: function() {
          var limit = $('#lastwitsend').offset().top;
          return limit;
       },
          zIndex: 999,
       });      
        });
  </script>
  <div class="title">
     <p>Wits End Discography</p>
  </div>
  <div class="content">
     <p>Siste Sukk tapes & records is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design.
     </p>
  </div>
  </a>

  <div id="witsend">
  <div class="post">

     <div id="witsendtitle">
    <a href="#top" id="witsend-hide">
       <script>
          $('#witsend-hide').click(function () {
                 $('#witsend').hide();
         $('#witsend-show').show();
         $('#closethis').toggle();
         active = '';
      });
       </script>
       <p class="titletext">
          <p class="exit">&#10005;</p> Wits End Discography
       </p>
        </a>
     </div>

 <div class="content open">
    <p>
  <a href="http://www.sistesukk.com">Siste Sukk tapes & records</a> is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design. Basing the cover on a piece of folded newsprint and a and a small plastic bag, it pays respect to old school zine-culture while still keeping a sense of contemporariness and distinction in a scene heavily influenced by D.I.Y solutions.

  Memento mori!<br><br>In collaboration with <a href="http://www.martinmartin.no">Martin Asbj&oslash;rnsen</a>
        </p>
    <p class="small">2012 &middot; Commissioned &middot; <a id="perma" href="http://www.jonasersland.net/index.php?section=witsend#witsend">Permalink <span id="flag"> &#9873;</span></a>
        </p>
     </div>
  </div>        
  <div id="picswitsend">
  </div>                
  </div>
  </div>

是一家位于奥斯陆的小型独立唱片公司，专注于emo和hardcore，以磁带形式发布他们的大部分音乐。当我们为Wits End的最新版本制作盒式磁带封面时，我们想让材料的非传统使用在设计中发挥重要作用。封面以一张折叠的新闻纸、一张纸和一个小塑料袋为基础，在受到D.I.Y解决方案严重影响的场景中，它既尊重传统的杂志文化，又保持了当代感和独特性。
森喜朗纪念品

与

2012·；委托&米德多；

我真的很感谢，如果有人愿意给一些想法在这方面，我很抱歉，如果我包括太少或无关的信息。如果有什么问题，请尽管问，我很乐意回答

祝你今天过得非常愉快

---

编辑：这里是正在运行的站点：

您可以使用jQuery方法scrollTop“绝对”滚动到浏览器顶部下方的90px，并且您可以设置它的动画以引导它，使其在以下位置变得轻松：。您尝试执行的操作将如下所示：

$("#linkTopAnchor").click(function() {
    $(this).blur();
    $("html, body").animate({scrollTop: "90px"}, "fast");
    return false;
});

---

我正在使用

$（this.blur（）

因为某些移动设备会自动滚动到当前突出显示的任何位置，所以页面会滚动到您想要的位置，然后跳回启动事件的按钮（如果您没有手动取消选择）。我有

返回false以防止URL更改为哈希标记。在您的情况下，您可能希望URL实际发生更改，因此您可以简单地将其删除。
非常感谢您的建议！我一直认为
scrollTop
只与完整文档本身相关，而与浏览器无关。此脚本是否会使单击的元素自动将其自身定位在浏览器顶部下方90px，而不管其先前的位置如何？此脚本不会更改任何元素的位置，它将导致浏览器自身滚动-就像您自己单击上/下箭头一样。如果您希望，浏览器的上一个位置可能很重要（例如，您可以使用scrollTop而不传入任何参数，以确定页面需要滚动多远才能看到任何元素的顶部），但我给您的脚本并不是在查找浏览器的上一个位置。通读scrollTop文档-这是一个很酷的函数，你可以用它做很多事情。谢谢，这就是我的意思，我只是表达得有点笨拙。一定会阅读scrollTop文档。非常感谢你的帮助！
  <div class="text">
  <a name="witsendlink" class="anchorlink"></a>
  <a href="#witsendlink" id="witsend-show">
  <script>
     $("#witsend-show").click(function() {      
        $('#' + active).hide();
        $('#' + active + '-show').show();
        $('#infomore').slideUp(200);
        $('#witsend-show').hide();
        $('#witsend').show();
        active = "witsend";
    $('#closethis').show();
    $('#faq').hide();

    if($(this).width() <= 568){
       $("#picswitsend").load("witsendpicsm.html");
    } else {
       $("#picswitsend").load("witsendpics.html");
    }

    $('#witsendtitle').scrollToFixed({
       marginTop: $('#top').outerHeight() - 44,
       limit: function() {
          var limit = $('#lastwitsend').offset().top;
          return limit;
       },
          zIndex: 999,
       });      
        });
  </script>
  <div class="title">
     <p>Wits End Discography</p>
  </div>
  <div class="content">
     <p>Siste Sukk tapes & records is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design.
     </p>
  </div>
  </a>

  <div id="witsend">
  <div class="post">

     <div id="witsendtitle">
    <a href="#top" id="witsend-hide">
       <script>
          $('#witsend-hide').click(function () {
                 $('#witsend').hide();
         $('#witsend-show').show();
         $('#closethis').toggle();
         active = '';
      });
       </script>
       <p class="titletext">
          <p class="exit">&#10005;</p> Wits End Discography
       </p>
        </a>
     </div>

 <div class="content open">
    <p>
  <a href="http://www.sistesukk.com">Siste Sukk tapes & records</a> is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design. Basing the cover on a piece of folded newsprint and a and a small plastic bag, it pays respect to old school zine-culture while still keeping a sense of contemporariness and distinction in a scene heavily influenced by D.I.Y solutions.

  Memento mori!<br><br>In collaboration with <a href="http://www.martinmartin.no">Martin Asbj&oslash;rnsen</a>
        </p>
    <p class="small">2012 &middot; Commissioned &middot; <a id="perma" href="http://www.jonasersland.net/index.php?section=witsend#witsend">Permalink <span id="flag"> &#9873;</span></a>
        </p>
     </div>
  </div>        
  <div id="picswitsend">
  </div>                
  </div>
  </div>

$("#linkTopAnchor").click(function() {
    $(this).blur();
    $("html, body").animate({scrollTop: "90px"}, "fast");
    return false;
});