如何解决这个 Jquery 错误？

Question

我制作了一些 Jquery，你可以在下面的这个小提琴中看到： http://madaxedesign.co.uk/dev/Test/ http://jsfiddle.net/x82mU/1/

代码：

$(document).ready(function() {
var $root = $('html, body ');
$('.scroll a').click(function(e) {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

// Responsive menu 
$(function() {
    var pull        = $('#pull'),
        menu        = $('nav ul'),
        menuHeight  = menu.height()

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
}); 
 });

但它会出现以下错误： 未捕获的类型错误：无法读取未定义的属性“顶部”

这会阻止我的下一个 Jquery 工作。

我想知道是否有人可以让我知道原因，或者给我一个解决方案？

非常感谢

Answer 1

您正在尝试从 href 获取选择器，这在您的许多菜单项中都不存在。

即：

    <li><a href="#">Home</a></li>
    <li><a href="#aboutUs">About us</a></li>
    <li><a href="#">Portfolio</a></li>        
    <li><a href="#">Contact us</a></li>

和

$(href).offset().top //here offset() of an empty jquery object is undefined.

不是问题，但您可以使用this.href 而不是$.attr(this, 'href')

试试这个：

 $('.scroll a').click(function(e) {
    var href = $(this).attr("href"), $el = $(href), top=0; //default top to 0
       if($el.length)  //if there is element matching the href
          top = $el.offset().top; //set the top
    $root.animate({
        scrollTop: top //now scroll
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

Fiddle

Answer 2

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

更新为评论

为

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

为了工作，

href

变量必须是页面上的一个元素。

所以如果你的链接是这样的

<a href="#an_id_to_a_div">...</a>

会好的。

jquery dom 对象创建

 $(dom_element) 

以 html 标签、类、id 或现有的 Dom 对象（窗口、文档..）为目标