0

我在这里有代码的现场演示：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);
});
4

3 回答 3

2

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

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

于 2013-06-20T20:12:38.800 回答
1

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

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

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

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

然后你寻找一个awith a nameof s01。你的锚没有这个名字，你的锚被命名为1。什么都没有的偏移量是空的，所以你然后尝试获取top空的属性。

于 2013-06-20T20:16:05.377 回答
1

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

$('a[name="'+nn+'"]')
于 2013-06-20T20:20:36.720 回答