1

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

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

此外，为了防止移动设备和小屏幕上的访问者必须加载全尺寸图像，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

4

1 回答 1

0

您可以使用 jQuery 方法 scrollTop 将“绝对”滚动到浏览器顶部下方 90 像素 - 您可以为其设置动画以使其轻松进入：http ://api.jquery.com/scrollTop/ 。您尝试做的将如下所示：

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

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

于 2013-01-11T19:17:22.263 回答