页面完全加载后加载锚标记答案

【问题标题】：Load anchor tag after page has fully loaded页面完全加载后加载锚标记
【发布时间】：2017-12-01 23:16:24
【问题描述】：

我有一个名为 flexslider 的幻灯片插件，它仅在页面完全加载并下载所有图像后才会显示。

我在这个页面上还有一个锚标记，它在页面完全加载之前被调用。

这导致锚标记位于错误的位置，因为页面高度已更改以适应幻灯片。

你可以在这里看到我的意思：http://ypc.org.au/ministries/form#transform2015

我已经复制了页面并删除了幻灯片，它似乎可以工作，但我需要它与幻灯片一起使用： http://ypc.org.au/ministries/form2#transform2015

有人可以建议我如何仅在页面完全加载后才加载锚标记？还是我缺少一些简单的东西？

谢谢！

编辑：

我认为这可能是 flexslider 加载页面的方式：

      <script type="text/javascript">
        $(function(){
          SyntaxHighlighter.all();
        });
        $(window).load(function(){
          $('.flexslider').flexslider({
            animation: "slide",
            start: function(slider){
              $('body').removeClass('loading');
            }

          });
        });
      </script>

【问题讨论】：

标签： anchor loaded

【解决方案1】：

这可能是您的解决方案。使用这个 jQuery 代码。

<script type="text/javascript">
$(window).load(function() {
    $(".your-anchor-tag").fadeOut();
});
</script>

【讨论】：

感谢您的建议，但无法正常工作。我认为这可能是 Flexslider 的问题以及它延迟加载的方式。我还尝试添加 $(".transform2015").fadeOut();直接进入 FlexSlider 加载函数，但仍然无法让它跳转到正确的位置。
可能是 FlexSlider 的问题。我在我的网站上使用此代码。白色画布上有加载图像，而页面未加载，它对我很有效。我建议编写您自己的滑块。太简单了。
谢谢，我会考虑这样做的。我从来没有想过要制作自己的滑块，但我想滑块并没有太多的事情要做，而 jquery 让它变得容易多了。我已经看到另一个网站按照您的建议使用白色画布；我可以去那个网站看看。

【解决方案2】：

我遇到了同样的问题，因为我使用的是幻灯片，并且由于其他响应元素，所以我无法确定图像的高度。您可以使用 JQuery 脚本，这可以在页面加载后推迟锚链接，我还添加了 20 px 的偏移量（如果您有一个粘性菜单栏，您可以使这个空间更大）。

$(document).ready(function() {
    if(window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top - 20
        }, 500);
    }
});

【讨论】：