javascript - 一页网站上的滚动位置错误

Question

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

例如，当尝试访问此原始 URL http://wp.themechills.com/eternity/#rsvp 时这个想法是让页面加载到该部分。但会发生什么，它向上滚动到伴郎和礼物部分之间。

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

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

有人可以帮忙吗？

提前致谢。

狮子座

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

代码示例

jQuery(文档).ready(函数($) {

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 事件页面加载或文档准备之后触发菜单单击事件，因此当页面获取时您可以检查URL中的hash并可以使用相同的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);
    }
}
});