Question

我有一些链接：

 <ul class="vertlist">
    <li><a href="#personal" title="Go to Personal section." class="crumblink">Personal</a></li>
    <li><a href="#business" title="Go to Business section." class="crumblink">Business</a></li>
    <li><a href="#company" title="Go to Company section." class="crumblink">Company</a></li>
    <li><a href="#engineering" title="Go to Engineering section." class="crumblink">Engineering</a></li>
    <li><a href="#it" title="Go to IT section." class="crumblink">IT</a></li>
    <li><a href="#hr" title="Go to HR section." class="crumblink">HR</a></li>
  </ul>

一些应该允许一些平滑导航的jquery：

  $(document).ready(function () {
            $('.crumblink').click(function () {
                $('html, body').animate({
                    scrollTop: $($.attr(this, 'href')).offset().top
                }, 500);
                return false;
            });
        })

当我点击任何链接时，我得到一个未被捕获的例外：

“无法读取null的属性顶部”

例如个人的锚标签是这样的：

<h2><a name="personal" id="myPersonal">Personal</a></h2>

Answer 1

锚变量不包含您站点的有效选择器。在此调用偏移将返回 null 。

您正在尝试访问不存在的href。

see here

Answer 2

如果你试图从你的主播中获取href属性，那么你做得不对（或者我还没有发现jQuery的奥秘）：

scrollTop: $($.attr(this, 'href')).offset().top

应该是：

scrollTop: $(this.href).offset().top

如果href的值是无效的选择器，则offset()可能会返回null。此代码将防范：

var elements = $(this.href);

if (elements && elements.length) {
    $('html, body').animate({
        scrollTop: elements.offset().top
    }, 500);
}

未被捕获无法读取null的顶部

2 个答案: