Как заставить ссылки работать?

Question

[Magnus Keef]

В мобильной версии сайта есть менюшка.
Ссылка на сайт



Но не работают ссылки. Наверное дело в скрипте, который прокрутку делает по клику, на десктопной версии.
Помогите пожалуйста сделать так, чтоб в мобильной версии ссылки тоже работали
Вот html:

<!------------header menu--------------->
<header>
    <div class="left-container">
        <nav>
            <ul class="list">
                <li class="list__item">
                    <a href="#" data-value="about" class="list__item--link active">Обо мне</a>
                </li>
                <li class="list__item">
                    <a href="#" data-value="portfolio" class="list__item--link">Портфолио</a>
                </li>
                <li class="list__item">
                    <a href="#" data-value="review" class="list__item--link">Отзывы</a>
                </li>
                <li class="list__item">
                    <a href="#" data-value="services" class="list__item--link">Услуги и цены</a>
                </li>
                <li class="list__item">
                    <a href="#" data-value="contact" class="list__item--link">Контакты</a>
                </li>
                <div class="line"></div>
            </ul>
        </nav>
    </div>
    <!-------------mobile menu--------------->
    <button class="menu-toggle"></button>
    <nav>
        <ul class="menu">
            <li data-text="Обо мне"><a href="about">Обо мне</a></li>
            <li data-text="Портфолио"><a data-value="portfolio">Портфолио</a></li>
            <li data-text="Отзывы"><a data-value="review">Отзывы</a></li>
            <li data-text="Услуги и цены"><a data-value="services">Услуги и цены</a></li>
            <li data-text="Контакты"><a data-value="contact">Контакты</a></li>
        </ul>
    </nav>
    <!-------------END mobile menu--------------->
    <div id="logo">
        <a href="#"><img src="img/logo.png" alt="AnWedding"></a>
    </div>
    <div class="right-container">
        <div class="social">
            <a target="_blank" href="https://vk.com/weddingorgrzn"><img src="img/social/vk-social.svg" alt="vk.com/weddingorgrzn"></a>
            <a target="_blank" href="https://www.instagram.com/katya.katherina"><img src="img/social/instagram-logo.svg" alt="instagram.com/katya.katherina"></a>
        </div>
        <div class="callMe"><a data-value="mail">Заказать обратный звонок</a></div>
    </div>
</header>
<!------------END header menu--------------->

Вот скрипты:

//для прокрутки
var linkMail = 'header .right-container .callMe a';
var linkNav = 'nav a';
var bodyHtml = 'body, html';

$(linkNav).click(function(){
    $(bodyHtml).animate({
        scrollTop:$('#' + $(this).data('value')).offset().top
    },1500);
});

$(linkMail).click(function(){
    $(bodyHtml).animate({
        scrollTop:$('#' + $(this).data('value')).offset().top
    },1500);
});
$(linkMail).click(function(){
    $(bodyHtml).animate({
        scrollTop:$('#' + $(this).data('value')).offset().top
    },1500);
});
//END для прокрутки

//для анимации подчеркивания
$(function() {
    var $line           = $(".line"),
        $menu_link      = $(".list__item--link"),
        $active         = $(".active"),
        $element,
        $active_left    = $active.position().left,
        $active_width   = $active.parent().width(),
        $new_left,
        $new_width;

    $line.width($active_width).css("left", $active_left);

    $($menu_link).hover(function() {
        $element = $(this);
        $new_left =  $element.position().left;
        $new_width =  $element.parent().width();
        $line.stop().animate({left: $new_left,width: $new_width});
    }, function() {                  $line.stop().animate({left:$active_left,width:$active_width});
    });



    //так плюшка
    $($menu_link).click(function(e){
        //e.preventDefault();
        $(".list").find(".active").removeClass("active");
        $(this).addClass("active");
        $active_left    =  $(this).position().left,
            $active_width   =  $(this).parent().width();
    })
});
//END для анимации подчеркивания

//кнопка меню на мобилке
$('button').on('click', function(){
    $('body').toggleClass('open');
});
$('li').click(function(){
    $(bodyHtml).animate({
        scrollTop:$('#' + $(this).data('value')).offset().top
    },1500);
});
//END кнопка меню на мобилке

Comments

[Никита Ермиличев]

Cannot read property 'top' of undefined

$('li').click(function(){
    $(bodyHtml).animate({
        scrollTop:$('#' + $(this).data('value')).offset().top //копайте тут
    },1500);
});

Answer 1

[Никита Ермиличев]

$('li').click(function(){
    var target = $(this).find('a').attr('data-value');
    
    $(bodyHtml).animate({
        scrollTop:$('#' + target).offset().top
    },1500);
});

Вот так работает

Answer 2

[Владимир Проскурин]

В консоль смотрите. У вас вот на эту строку ругается

scrollTop:$('#' + $(this).data('value')).offset().top

т.е. вот такого элемента не существует $('#' + $(this).data('value'))
измените на

scrollTop:$('#' + $(this).find('a').data('value')).offset().top

т.е. проблема в том, что вы слушаете клик по li, берете data-value с него же, хотя у вас data-value в теге a, который внутри li. Поэтому варианта 2

1. Слушать клик не по li а по a
   
2. При клике брать значение не из li, а из дочернего элемента - а. Что я и сделал.