jQuery 平滑滚动在运行时滚动到错误的目标（在测试页上有效）

Question

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

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

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

link"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>

这是我的 "pages":

<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 类似的属性。

希望对您有所帮助。

jQuery 平滑滚动在运行时滚动到错误的目标（在测试页上有效）

jQuery Smooth Scroll scrolls to wrong target when live (works on test page)

jquery

scroll

smooth

targets