javascript - 单击锚链接返回 NULL 作为偏移量

Question

我有一个标准菜单和 JS 用于在锚点之间平滑滚动。当我单击其中一个锚点时，它什么也不做，但我在开发工具中遇到错误。

这是我的菜单：

<div class="menu anc">
    <ul class="nav menu">
        <li class="item-111"><a href="#stills">stills</a></li>
        <li class="item-112"><a href="#art">art</a></li>
        <li class="item-113"><a href="#interactive">interactive</a></li>
        <li class="item-114"><a href="#about">about</a></li>
        <li class="item-115"><a href="#contact">contact</a></li>
    </ul>
</div>

JS部分：

 $( document ).ready(function() {
    $("header ul.menu li:first-child").addClass('active');
    $(".anc a").click(function(event){      
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
 });

http://jsfiddle.net/mitt314/tXaLC/5/

以及来自 crom dev 工具的错误：

> Uncaught TypeError: Cannot call method 'offset' of null script.js:18
> (anonymous function) script.js:18 x.event.dispatch jquery.js:4676
> y.handle jquery.js:4360

为什么锚点返回 NULL 值？当我试图删除脚本时，一切正常。

Answer 1

$( document ).ready(function() {
        $("header ul.menu li:first-child").addClass('active');
        $(".anc a").click(function(event){      
            event.preventDefault();
            $('html,body').animate({scrollTop:$(event.target.hash).offset().top}, 500);
        });
     });

Answer 2

我发现了问题。这是一个 jQuery 冲突。

可能是其中一个组件将 jQuery 加载到我的页面并导致此冲突。

Answer 3

更新您必须先包含jquery然后尝试$($(this).attr('href'))代替$(this.hash)like ，

 $(".anc a").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$($(this).attr('href')).offset().top}, 500);   
 });

演示