jQuery Smooth Scroll在活动时滚动到错误的目标（在测试页面上工作）

Question

我一直在寻找一个没有成功的解决方案，也许这里有人可以帮助我！ :)

我是 jQuery 新手，所以可能是我忘记了一些简单的事情，但是当我在浏览器中测试页面时滚动工作正常，当我将页面上传到服务器时它就不起作用了。一旦上线，链接就会停​​止工作，或者有时会滚动一英寸左右，但不会滚动到正确的位置。

我无法在这里上传所有代码，所以这里是实时页面：http://www.carolinaekstrom.se/

链接“om mig”应该停在我的照片上，“kontakt”停在“hör gärna av er!”和“portfolio”，以及投资组合:)

这是我的 js：

$(document).ready(function() {
 function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if (  locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
  var $target = $(this.hash), target = this.hash;
  if (target) {
    var targetOffset = $target.offset().top -60;
    $(this).click(function(event) {
      event.preventDefault();
      $(scrollElem).animate({scrollTop: targetOffset}, 700, function() {

      });
    });
  }
}
});

// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
  var el = arguments[i],
      $scrollElement = $(el);
  if ($scrollElement.scrollTop()> 0) {
    return el;
  } else {
    $scrollElement.scrollTop(1);
    var isScrollable = $scrollElement.scrollTop()> 0;
    $scrollElement.scrollTop(0);
    if (isScrollable) {
      return el;
    }
  }
}
return [];
}

});

这是菜单：

<div class="menu">
<div id="nav">
 <div id="content2">
     <a href="#screen1"><img style="float:left; max-width:33.416%;"    src="menu_01.png" ></a>
     <img style="float:left; max-width:34.416%;" src="menu_02.png" >
     <a href="#screen2"><img style="float:left; max-width:9.833%;" src="menu_03.png" ></a>
     <a href="#screen3"><img style="float:left; max-width:9.6%;" src="menu_05.jpg" ></a>
     <a href="#screen4"><img style="float:left; max-width:11.416%;" src="menu_04.png" ></a>
 </div>

这是我的“页面”：

<div id="pagewrap1">
<a id="screen1"></a>
<a id="pad1"></a>
<a id="mobile1"></a>
<div id="content">
<div id="box1"><img src="carocontent.png" /></div>
</div>
</div>

<div id="pagewrap2">
<a id="screen2"></a>
<a id="pad2"></a>
<a id="mobile2"></a>
<div id="content">
<div id="box2"><img src="jag.jpg" />


 </div>
 </div>
 </div>




<div id="pagewrap3">
<a id="screen3"></a>
<a id="pad3"></a>
<a id="mobile3"></a>
<div id="content">
<div id="box3">

<br/><br/><br/><br/><br/>
<div class="text"><div align="center"><b>HÖR GÄRNA AV ER!</b></div></div>
<div class="between"><img src="between.png" /></div>
<div id="contactphone" class="between"><img src="between.png" /></div>


 <div id="contactweb">
  <a href="tel:+46768727892"><img style="max-width:8%;" src="contact_01.png" /></a>
  <a href="mailto:carolina_ekstrom@hotmail.com"><img style="max-width:8%;" src="contact_02.png" /></a>
  <a href="https://www.facebook.com/carolina.ekstrom.395" target="_blank"><img style="max-width:8%;" src="contact_03.png" /></a>
   </div>


   </div>

   </div>
   </div>
    </div>

非常感谢您的帮助！ :)

Answer 1

它无法正常工作的原因是当document ready 事件触发时图像尚未完全加载。请注意，文档就绪是指 DOM/html 已准备好供 JS 执行，但它不保证资源已加载。

因此，您最初计算的targetOffset 在加载所有图像后无效。

我建议遵循这样的委托模式（这需要您进行一些重构）：http://jsfiddle.net/peterdotjs/tao135x9/19/

$('body').on('click', 'nav a', function(evt){
    evt.preventDefault();
    var $this = $(this);
    $('html, body').animate({
        scrollTop: $($this.attr('href')).offset().top - navHeight 
    },700);
});

在我的示例中，targetOffset 是根据滚动位置计算得出的。

如果您将代码更改为在 window.load 事件上运行，作为一种快速解决方法，它应该也能正常工作。

当所有资源都加载完毕时，window.load 事件会触发 - 因此您可以假设计算是准确的。

我不确定您为什么使用“screen1”、“screen2”等，而不是使用引用您想要滚动到的位置的id，通常您会匹配href id 属性或类似属性在导航到滚动到的元素的id。

希望这会有所帮助。