4

我有一些 javascript 可以平滑滚动到任何点击的 #anchor-id （改编this）。对于某些页面，它会引发$target.offset(...) is undefined错误并停止工作，我不明白为什么。

我已经做了一些测试，据我所知，它似乎与页面的长度相关。保持所有变量相同，仅改变内容量，错误发生（在完全相同的页面上）。

奇怪的是，我无法在jsfiddle上重现这种效果，它在那里工作得很好，对于每个长度。有谁知道如何解决这个错误？可能是什么原因造成的？

这是我正在使用的javascript（我在每个页面的底部链接到它，就在</body>标签之前和加载jquery 1.10.2之后）：

$(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;
  $(this).click(function(event) {
    event.preventDefault();
    $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
   // commented line below because it adds a hash to the url and a history item
   // location.hash = target;
    });
  });
   }
 }
  });
  // 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 [];
  }
});
4

2 回答 2

6

当哈希目标不存在时会发生这种情况。在 HTML5 中，有效的哈希目标只能用 id 编写。

所以这不起作用：

<a name="#hash">Hash</a>

但这将：

<a id="#hash">Hash</a>

由于使用 name="" 不是有效的 HTML5，因此页面上不存在 #hash，因此当您尝试使用以下方法引用它时：

var $target = $(this.hash) 它返回未定义。因此，即使具有有效哈希目标的链接如果包含在无效目标之后，也不会平滑滚动。

于 2013-07-30T18:42:33.423 回答
0

我知道这是一个老问题，但我最近遇到了这个问题，建议的解决方案没有帮助。用于平滑滚动的脚本有错误。它只检查链接是否链接到锚点。但如果锚目标实际存在于当前页面上，则不会。所以这条线

if (target) {

应该

if ($target.length > 0) {
于 2018-06-25T10:43:42.150 回答