代码示例

Question

我遇到了一个问题，即当作为外部链接引用时，滚动位置不会转到页面的相应部分。

例如，在尝试访问此原始网址http://wp.themechills.com/eternity/#rsvp时，想法是在该部分加载页面。但是会发生什么呢，它会卷入“伴郎与礼物”部分之间。

同样的链接，从网站侧导航使用时效果很好。例如，转到http://wp.themechills.com/eternity/，然后单击RSVP菜单项，您将看到它实际上转到相应的部分。

我已检查过页面上是否有任何JS或其他错误，但似乎没有任何错误。

有人可以帮忙吗？

提前致谢。

利奥

=============================================== ==============================

代码示例

jQuery（document）.ready（function（$）{

function onePageNav(){
    /*-----------------------------------------------------------------------------------*/
    /*  Smooth Scroll
    /*  Thanks to: https://github.com/davist11/jQuery-One-Page-Nav
    /*-----------------------------------------------------------------------------------*/
    $(".nav").onePageNav({
        filter: ':not(.external)',
        changeHash: false,
        scrollSpeed: 1500,
    });
}

onePageNav();

function smoothScroll(){

    // Scrolls to RSVP section
    $(".js-scroll").click(function() {
        $('html, body').animate({
            scrollTop: $("#rsvp").offset().top
        }, 2000);
        return false;
    });

    return false;
}

smoothScroll();

}）;

jQuery(window).load(function(){
    if(window.location.hash) {
        var hash = window.location.hash.substring(1);
    if(jQuery('a[href="#'+hash+'"]','#menu-primary').length>0){
      jQuery('html, body').animate({
          scrollTop: jQuery("#"+hash).offset().top
      }, 1000);
    }
}

}）;

Answer 1

要实现与使用菜单点击相同的功能，您可以在jQuery事件page load或document ready之后触发菜单点击事件，因此当页面获取时，您可以检查hash in URL并且可以触发具有相同href的菜单：

jQuery(document).ready(function(){
  if(window.location.hash) {
      var hash = window.location.hash.substring(1);
      if(jQuery('a[href="#'+hash+'"]','#menu-primary').length>0){
        jQuery('a[href="#'+hash+'"]','#menu-primary').trigger('click');
      }
  }
});

或者你可以尝试这个找到正确的元素位置，然后滚动到同一部分：

jQuery(document).ready(function(){
  if(window.location.hash) {
    var hash = window.location.hash.substring(1);
    if(jQuery('a[href="#'+hash+'"]','#menu-primary').length>0){
      jQuery('html, body').animate({
          scrollTop: jQuery("#"+hash).offset().top
      }, 1000);
    }
  }
});

关于窗口加载：

jQuery(window).load(function(){
  if(window.location.hash) {
    var hash = window.location.hash.substring(1);
    if(jQuery('a[href="#'+hash+'"]','#menu-primary').length>0){
      jQuery('html, body').animate({
          scrollTop: jQuery("#"+hash).offset().top
      }, 1000);
    }
}
});

Answer 2

当页面加载时，它会确定当时RSVP部分的位置。问题是这并没有影响所有图像的高度。在图像加载之前，我们会说，RSVP部分在页面下方500px。图像加载后，总图像高度等于1000px，现在RSVP部分大约为1500px。要查看页面加载，请播放video here。正如你所看到的那样它确实可以做到，然后其余的加载。有几种方法可以解决这个问题。

1）滚动到该部分的脚本，确保它在文档就绪时执行。如果存在延迟加载器或脚本加载图像或文档准备就绪后，这可能不起作用。如果图像是通过脚本加载的，则单页导航必须是文档中最后一次调用才能正常工作。

2）使用jQuery（window）.load（function（）{}） - 等待加载所有图像，帧和对象。如果在文档完全加载后任何图像或元素的大小增加，这仍然可能会产生影响。

3）确保所有图像/ div / span / sections / etc ...都加载了高度。这将像占位符一样，将RSVP推送到正确的位置。快速浏览显示至少有5张图片没有设定的高度。这不会影响JS加载的任何图像

Answer 3

使用此选项，它会将您滚动到ID为rsvp的元素的滚动位置。

$(document).ready(function(){

    var offset = $("#rsvp").offset();
    $("body, html").animate({scrollTop:offset.top-10});

})

在一个页面网站上滚动位置错误

代码示例

3 个答案: