Uncaught TypeError: Невозможно прочитать свойство 'top' из undefined -> в ссылке привязки - PullRequest
0 голосов
/ 30 января 2020

На следующем веб-сайте (https://skayan.de/misc/example/) две кнопки связаны с разделом, называемым справа: «Дополнительная информация» прокручивается вниз к части содержимого (Некоторое содержимое) и «Контакт» вниз в нижней части сайта (вот он). На рабочем столе якорные ссылки работают, но на мобильных устройствах я получаю вышеуказанную ошибку.

Вот код:

var lastToogle = null;
$(document).ready(function(){
"use strict";

$('a#go-contact').on( "click", function() {

     if (lastToogle === null || $(".overlay").hasClass("skew-part")) {
        // open
        $(".overlay").removeClass("skew-part");
        $("#right-side").removeClass("hide-right");
        $("#close-more-info").removeClass("hide-close");
        $('.mCSB_scrollTools').addClass('mCSB_scrollTools-left');
        $("#mcs_container").mCustomScrollbar("scrollTo", "#contact-form",{
            scrollInertia:500,
            callbacks:false
        });
        lastToogle = 'go-contact';
    } else if (lastToogle === 'go-contact'){
        // close
        $(".overlay").addClass("skew-part");
        $("#right-side").addClass("hide-right");
        $("#close-more-info").addClass("hide-close");
        $('.mCSB_scrollTools').removeClass('mCSB_scrollTools-left');
        lastToogle = null;
    } else {
        // scroll to
        $("#mcs_container").mCustomScrollbar("scrollTo", "#contact-form",{
            scrollInertia:500,
            callbacks:false
        });
        lastToogle = 'go-contact';
    }
});

$('a#open-more-info').on( "click", function() {
    if (lastToogle === null || $(".overlay").hasClass("skew-part")) {
        // open
        $(".overlay").removeClass("skew-part");
        $("#right-side").removeClass("hide-right");
        $("#close-more-info").removeClass("hide-close");
        $('.mCSB_scrollTools').addClass('mCSB_scrollTools-left');
        $("#mcs_container").mCustomScrollbar("scrollTo", "#right-side",{
            scrollInertia:500,
            callbacks:false
        });
        lastToogle = 'open-more-info';
    } else if (lastToogle === 'open-more-info'){
        // close
        $(".overlay").addClass("skew-part");
        $("#right-side").addClass("hide-right");
        $("#close-more-info").addClass("hide-close");
        $('.mCSB_scrollTools').removeClass('mCSB_scrollTools-left');
        lastToogle = null;
    } else {
        // scroll to
        $("#mcs_container").mCustomScrollbar("scrollTo", "#right-side",{
            scrollInertia:500,
            callbacks:false
        });
        lastToogle = 'open-more-info';
    }
});

$('button#close-more-info').on( "click", function() {
    $(".overlay").addClass("skew-part");
    $("#right-side").addClass("hide-right");
    $("#close-more-info").addClass("hide-close");
    $('.mCSB_scrollTools').removeClass('mCSB_scrollTools-left');
    setTimeout(function() {
        $("#mcs_container").mCustomScrollbar("scrollTo", "#right-side",{
            scrollInertia:500,
            callbacks:false
        });
    }, 350);
});

Была попытка изменить этот блок:

$("#mcs_container").mCustomScrollbar("scrollTo", "#right-side",{
            scrollInertia:500,
            callbacks:false
        });

к этому:

$('html,body').animate({
  scrollTop: $("#right-side").offset().top},'slow');

Также для "формы контакта" ...

Но это работало только на мобильных устройствах, а не на рабочем столе.

Также сбивает с толку, если я удаляю внутри диалогового окна «Выходные данные» и «Конфиденциальность», якорь «Дополнительная информация» работает на обеих сторонах (мобильный и настольный компьютер).

Каково решение этой проблемы?

...