javascript - jquery anchor 动画不起作用

Question

我正在尝试为 anchor 链接上的滚动设置动画并收到错误:

无法读取未定义的属性“top”

这是 js:

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 1000);
    return false;
});

这是 html:

<li><a href="index.html#r">My anchor link</a></li>

Answer 1

这是错误的:$.attr(this, 'href').substr(1)，使用它来获取 href 属性:

$(this).attr('href');

这是工作代码。首先，我提取 anchor 名称，然后使用它:

$('a').click(function(){
    var href = $(this).attr('href');
    var name = href.substr(href.lastIndexOf('#')+1);

    $('html, body').animate({   
        scrollTop: $('[name="' + name + '"]').offset().top
    }, 1000);
    return false;
});