Question

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

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

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

链接“om mig”应该停留在我的照片上，“kötakt”停留在“hörgärnaaver！”和“投资组合”中，以及投资组合中的内容：）

这是我的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事件 - 因此您可以假设计算准确。

我不确定你为什么使用＆＃34; screen1＆＃34;，＆＃34; screen2＆＃34;等，而不是使用引用你想要的地方的id滚动到通常，您会将导航中的href id属性或类似内容与滚动到的元素的id相匹配。

希望这有帮助。

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

1 个答案: