Question

以下代码在页面加载时有效。但是当我点击一个应该打开模态窗口的按钮时，我收到以下错误：

未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

如何解决此错误？

if ($(window).width() > 992) {

    (function($) {
        "use strict";
        $(".page-scroll a[href^='#'], #intro a").on('click', function(e) {
            e.preventDefault();
            var hash = this.hash;
            $('html, body').stop().animate({
                scrollTop: $(hash).offset().top - 100}, 2000, 'easeOutExpo');
        });
    })(jQuery);

    $('body').scrollspy({
        target: '.navbar',
        offset: 110
    });
    // alert("large");
}
else {

    (function($) {
        "use strict";
        $(".page-scroll a[href^='#'], #intro a").on('click', function(e) {
            e.preventDefault();
            var hash = this.hash;
            $('html, body').stop().animate({
                scrollTop: $(hash).offset().top - 50}, 2000, 'easeOutExpo');
        });
    })(jQuery);

    $('body').scrollspy({
        target: '.navbar',
        offset: 70
    });
    // alert("small");
}   

//modal popup function
function popup_modal(item){
    var link = $(item).attr('id');
    $('#bootstrap_modal').load('/'+link+'');
    $('#bootstrap_modal').modal('show'); 
    $("#bootstrap_modal").on("show", function () {
        $("body").addClass("modal-open");
    }).on("hidden", function () {
        $("body").removeClass("modal-open")
    });
}

//Modal pop up
$('.mmodal').on('click', function(){
    popup_modal(this);
});

Answer 1

您收到错误的可能原因是，对于模态按钮，$(hash)元素不存在。模态按钮是属于$(".page-scroll a[href^='#'], #intro a").on('click')事件的元素。如果没有id等于＆＃34; href＆＃34;点击按钮的属性，你无法得到它＆＃34; offset.top＆＃34;。把＆＃34; console.log(hash)＆＃34;检查你到那里。

可能的解决方案：

if ($(hash).length) {
    $('html, body').stop().animate({
         scrollTop: $(hash).offset().top - 100}, 2000, 'easeOutExpo');
}

Answer 2

尝试以下代码：

if ($(window).width() > 992) {

    (function($) {
        "use strict";
        $(".page-scroll a[href^='#'], #intro a").on('click', function(e) {
            e.preventDefault();
            var hash = this.hash;
            var newVal = $(hash).offset().top - 100;
            $('html, body').stop().animate({
                scrollTop: newVal}, 2000, 'easeOutExpo');
        });
    })(jQuery);

    $('body').scrollspy({
        target: '.navbar',
        offset: 110
    });
    // alert("large");
}
else {

    (function($) {
        "use strict";
        $(".page-scroll a[href^='#'], #intro a").on('click', function(e) {
            e.preventDefault();
            var hash = this.hash;
            var newVal = $(hash).offset().top - 50;
            $('html, body').stop().animate({
                scrollTop: newVal}, 2000, 'easeOutExpo');
        });
    })(jQuery);

    $('body').scrollspy({
        target: '.navbar',
        offset: 70
    });
    // alert("small");
}   

//modal popup function
function popup_modal(item){
    var link = $(item).attr('id');
    $('#bootstrap_modal').load('/'+link+'');
    $('#bootstrap_modal').modal('show'); 
    $("#bootstrap_modal").on("show", function () {
        $("body").addClass("modal-open");
    }).on("hidden", function () {
        $("body").removeClass("modal-open")
    });
}

//Modal pop up
$('.mmodal').on('click', function(){
    popup_modal(this);
});

我已将变量newVal设置为$(hash).offset().top - 50

的值

无法阅读物业＆＃39; top＆＃39;单击按钮打开模态窗口时发生

2 个答案: