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

问题描述

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

I have a slideshow plugin called flexslider which is only displayed after the page has fully loaded and all images have been downloaded.

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

I also have an anchor tag on this page which is being invoked before the page has fully loaded.

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

This is causing the anchor tag to be in the wrong place as the page height has changed to accommodate the slideshow.

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

You can see what I mean here: http://ypc.org.au/ministries/form#transform2015

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

I've duplicated the page and removed the slideshow and it seems to work but I need it working with the slideshow:http://ypc.org.au/ministries/form2#transform2015

有人可以建议我如何仅在页面完全加载后才加载锚标记吗?还是我遗漏了一些简单的东西?

Can someone suggest how I could make the anchor tag load only after the page has fully loaded? Or is there something simple I am missing?

谢谢！

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

I think this might be how flexslider is loading the page:

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

          });
        });
      </script>

推荐答案

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

I had the same problem, because i was using a slideshow, and because of other responsive elements so i can't determine the height of the images for example.You can use a JQuery script, this can postpone the anchor link after the page is loaded, i added an offset of 20 px also (if you have a sticky menu bar you can make this space bigger).

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

这篇关于页面完全加载后加载锚标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！