Question

我正在开发一个单页网站，其中各种内容位于不同的垂直扩展div中。扩展div时，任何已经打开的div都会自动关闭，我也希望滚动页面，以便特定内容从浏览器顶部开始90px。

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

此外，为防止移动和小屏幕上的访问者必须加载完整大小的图像，jquery会检查访问者的屏幕大小，并将带有正确图像的相应html文件加载到#picswitend中。这可能是问题的一部分吗？

以下是其中一个扩展div的代码。这是我第一次尝试使用jQuery，所以我猜它可能有点不精确，但它确实有效。

CSS：

  .anchorlink {
  position:absolute;
  margin-top: -90px;
  }

<head>中的代码：

  <head>
     <script>
        open = '';
        active = '';
        $(document).ready(function () {
        $('#closeinfo').hide();
        $('#closethis').hide();
        $('#faq').hide();
        $('#infomore').hide();
        $('#witsend').hide();
        });
     </script>
  </head>

其中一个扩展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>

如果有人愿意对此提出一些想法，我真的很感激，如果我收集的信息太少或无关，我很抱歉。请随时询问是否有任何问题，我很高兴回答！

度过一个非常辉煌的一天。

修改：这是实际运行的网站：http://www.jonasersland.net

Answer 1

您可以使用jQuery方法scrollTop“绝对”滚动到浏览器顶部下方的90px - 您可以将其设置为启动动画，以便它可以放松：http://api.jquery.com/scrollTop/。你要做的事情看起来像这样：

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

我正在使用$(this).blur();，因为某些移动设备会自动滚动到当前突出显示的内容 - 因此页面将滚动到您想要的位置，然后如果您不手动，则跳回到启动事件的按钮取消选择它。我在那里有return false;以防止URL更改为hash-tag。在您的情况下，您可能希望URL实际更改，因此您只需删除它。

锚链错误地计算扩展布局

1 个答案: