1

我有一个名为 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>
4

2 回答 2

0

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

$(document).ready(function() {
    if(window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top - 20
        }, 500);
    }
});
于 2017-12-01T15:16:24.410 回答
0

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

<script type="text/javascript">
$(window).load(function() {
    $(".your-anchor-tag").fadeOut();
});
</script>
于 2015-08-29T08:55:18.973 回答