Question

我在这里有代码的现场演示：LIVE DEMO

我要做的是当点击1框时，它应滚动到第一部分，当点击2框时，它应滚动到第二部分，依此类推。但是当我点击数字时，我收到以下错误：

offset().top is null or not an object

我的JQuery看起来像：

$(function() {
    $(".pointto").mouseover(function() {
        $(this).addClass("Hover");
    });
    $(".pointto").mouseout(function() {
        $(this).removeClass("Hover").removeClass("Pressed");
    });
    $(".pointto").mousedown(function() {
        $(this).addClass("Pressed");
    });
    $(".pointto").mouseup(function() {
        $(this).removeClass("Pressed");
    });
$(document).on('click', '.Hover, .Pressed, .pointto', function() { 
    var nn = $(this).attr('id').replace('s', '');
    alert('a[name="'+nn+'"]'); //clicking on 1 gives me <a name="01">
    t = $('a[name="'+nn+'"]').offset().top; //t = $('a[name="'+nn+'"]').offset().top;
    $('body,html').animate({scrollTop:t},800);
});
});

HTML示例：

<a id="s01" class="pointto">1</a> //clickable link
...
...
...
<a name="01">1. About</a> //target

知道如何解决该错误吗？

更新：[已解决]

$(document).on('click', '.Hover, .Pressed, .pointto', function() { 
    var nn = $(this).attr('id').replace('s', '');
    alert('a[name="'+nn+'"]');
    t = $('a[name="'+nn+'"]').offset().top; //t = $('a[name="'+nn+'"]').offset().top;
    $('body,html').animate({scrollTop:t},800);
});

Answer 1

您的选择器返回空。您的目标元素具有“1”，“2”等名称，并且您的选择器正在尝试查找“s01”，“s02”等。

您的代码应为var nn = $(this).attr('id').replace('s0', '');或重命名要适当滚动的元素。

Answer 2

根据你发布的html，这就是你所拥有的：

var nn = $(this).attr('id').replace('a', '');

由于id为s01，nn现在设置为s01，因为ID中没有“a”，所以不会替换任何内容

t = $('a[name="'+nn+'"]').offset().top;

然后，您会找到a name s01的{{1}}。您的锚没有此名称，您的锚名为1。 nothing的偏移量为null，因此您尝试将top属性设为null。

Answer 3

执行$('<a name="'+nn+'">')时的选择器是错误的。它应该是：

$('a[name="'+nn+'"]')

offset（）。top是null或不是JQuery中的对象错误

3 个答案: