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

Scroll position bug on one page website

本文关键字：一个 网站 错误 位置 滚动      更新时间：2023-09-26

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

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

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

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

有人能帮忙吗?

提前感谢。

狮子座

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

<标题> 代码范例

jQuery(文档)。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);
    }
}

});

为了实现与菜单单击相同的功能，您可以在jQuery事件page load或document ready之后触发菜单单击事件，因此当页面得到时，您可以在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);
    }
  }
});

on window load:

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);
    }
}
});

当页面加载时，它会在RSVP部分所在的位置定位。问题是，这并不会影响所有图像的高度。在加载图像之前，我们会说，RSVP部分位于页面下方500px处。图片加载后，总图片高度等于1000px，现在RSVP部分在1500px左右。要查看页面加载，请在这里播放视频。正如你所看到的，它做了它应该做的然后剩下的载荷。有几种方法可以解决这个问题。

1)滚动到该部分的脚本，确保它在文档准备就绪时执行。如果有一个延迟加载器，或者图像是由脚本加载的，或者文档准备好后，这可能无法工作。如果图像是通过脚本加载的，那么单页导航必须是文档中准备好正常工作的最后调用之一。

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

3)确保所有的图像/div/span/sections等…都装了一个高度。这将起到占位符的作用，并将RSVP推送到正确的位置。快速查看显示至少有5张图片没有设置高度。这不会影响任何由JS加载的图片

使用此功能，它将滚动到id为rsvp的元素的任何滚动位置。

$(document).ready(function(){
    var offset = $("#rsvp").offset();
    $("body, html").animate({scrollTop:offset.top-10});
})
相关文章：