Question

我在默认情况下设置为max-height: 0的文章中有一节，除非页面上的JS进程为其添加了“活动”类，在这种情况下我们将其展开。

TL; DR - 我希望能够深入/锚定链接到它的子部分，并且不知道如何。

如果用户点击页面上其他目标隐藏文章的链接，我们会触发以下事件来展示它，然后滚动到它：

$('.methodology .summary a:not([target="blank"])').click(function(){
  // Add the 'active' class to the article whenever anyone clicks an internal link in the relevant section
  if (!$(".methodology--js-essay-body").hasClass("active")) {
    $(".methodology--js-essay-body").addClass("active")
  }
})

$("a[href*='#']").not('.teammember a, .element-item > a, .elementitem > a, a.invokemodal, a.calendly-link').each(function(index) {
  // Invoke our scroll function on most similar links
  $(this).on('click', function(){
    scope.scrollToAnchor($(this).attr('href'));
  });
});

...

scrollToAnchor: function(aid) {
  // Find the corresponding anchor and scroll to it (offsetting for our header)
  var aTag = $("a[name='"+ aid.substring(1) +"']");
  var newPos = aTag.offset().top - 129;
  $('html,body').animate({scrollTop: newPos});
}

我知道这段代码有点难看，但它可靠地工作。

但是因为这篇文章太长了，所以我希望能够将某人直接链接到其中的各个部分 - 并且当他们这样做时，就会发现完整的内容。

我希望这只是一个简单的例子，只要在页面加载了包含锚标记的URL时添加active类，但似乎锚标记永远不会发送到服务器，所以我无法看到任何方法来实现这一目标。

所以我尝试使用以下JS：

function revealAndScroll(callback) {
  var anchor = window.location.hash;
  if ( anchor != "" ) {
    $('.methodology--js-essay-body').addClass('active');
  };
  callback();
};
revealAndScroll(function() {
  scope.scrollToAnchor(anchor);
});

（顺便提一下如何清理这个欢迎 - 我的JS非常粗略）。这有时会起作用，但它似乎仍然存在某种竞争条件（我认为回调应该避免） - 大约一半的时间页面加载然后滚动到你期望的地方，另一半它只是链接到文章的顶部。

我想知道这是否是因为CSS中设置的过渡时间：

.methodology-body {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease-in;
}
.active .methodology-body {
    opacity: 1;
    max-height: 2200rem;
    transition: all .3s ease-in;
}

但是如果是这样的话，我看不出如何让JS在执行之前等待转换（而且据我所知，它与此无关，因为页面上的锚链接工作正常并且还需要在滚动之前展示身体。）

这个问题有一个优雅的解决方案吗？

如何（可靠地）将链接锚定到深层链接中的隐藏元素

0 个答案: