Якорная ссылка на другую страницу и закрытие бокового меню

Здравствуйте, на мобильной версии есть боковое выезжающее меню, при нажатии на пункты в меню перебрасывает на якоря в страницах…

проблема в чем…
если нахожусь на странице site.ru/1.html и выбираю в меню якорь site.ru/#price (страница site.ru/2.html) то все ок, переходит на страницу и скрол к нужному месту. А вот если на текущей странице site.ru/2 открываю снова боковое меню и выбираю этот же пункт или другой якорь, страница пролистывается, но не закрывается меню.

у меню есть крестик закрыть меню.
$(close_button).click(function(e) { //on menu close button click
    e.preventDefault();
    $(slide_wrp).css({ "right": -$(slide_wrp).outerWidth() + 'px' }); //hide menu by setting right position
    setTimeout(function() {
        $(slide_wrp).removeClass('active'); // remove active class
    }, 50);
    $(overlay).css({ "opacity": "0", "width": "0" });
    $(body).css({ "overflow-y": "visible", "overflow-x": "visible" });
});
пробовал ссылки так:
<a href="[[~1]]#price" class="close_button">Стоимость процедуры 6</a>
пролистывание к якорю есть на текущей странице, но меню боковое так и остается открытым, как сделать чтоб меню закрылось при клике на пункты в меню?
Игорь
02 февраля 2022, 07:16
modx.pro
2 755
0

Комментарии: 7

Игорь
02 февраля 2022, 14:37
0
/* закрытие меню после нажатии на ссылки в меню*/
$('.side-menu-wrapper li a').click(function(e) { //on menu close button click
    e.preventDefault();
    $(slide_wrp).css({ "right": -$(slide_wrp).outerWidth() + 'px' }); // скрываем меню, прячем за область видимости
    setTimeout(function() { 
        $(slide_wrp).removeClass('active'); // remove active class 
    }, 50);
    $(overlay).css({ "opacity": "0", "width": "0" });
});
сделал ссылки так
<a href="[[~26]]#price">прайс</a>
как бы работает, но теперь другая проблема, обычные ссылки
<a href="[[~27]]">контакты </a>
— не кликабельные, а якоря расставлять не хочется для каждой ссылки
    Игорь
    02 февраля 2022, 15:24
    0
    Решено! Короче сам додумался методом тыка. Якори работают, ссылки обычные открывает

    <a id="section-posldedstviya"></a><!-- якорь в нужном месте //-->
    ссылка в меню
    <li><a href="[[~1]]#section-posldedstviya" class="ps-4">Последствия</a></li>
    в javascript.js:
    $('a').click(function(){
        // Здесь пишем код, который будет закрывать меню
        $(slide_wrp).css({ "right": -$(slide_wrp).outerWidth() + 'px' }); // скрываем меню
        setTimeout(function() {
            $(slide_wrp).removeClass('active'); // remove active class 
        }, 50);
        $(overlay).css({ "opacity": "0", "width": "0" });
    })
    Игорь
    02 февраля 2022, 16:19
    0
    Может кто подскажет как сделать и плавный скролл сразу к месту якоря?

    e.preventDefault();
                var anchor = $(this).attr('href');
                $('html, body').stop().animate({
                    scrollTop: $(anchor).offset().top - 60
                }, 800);

    и так пробую
    $('a').click(function() {
              
                var anchor = $(this).attr('href');
                $('html, body').stop().animate({
                    scrollTop: $(anchor).offset().top - 60
                }, 800);
            });
      Игорь
      02 февраля 2022, 16:40
      0
      браузеры оказывается поддерживают плавные скролы. но сафари не поддерживает

      а так работает это кусок, кроме сафари:
      <a href="site.ru/#steer">Бычок</a>
      
      <style>
      html {
        scroll-behavior: smooth; /* свойство scroll-behavior не наследуется, применяется к прокручиваемым блокам */ 
      }
      </style>
      
      <h2 id="steer">Бычок</h2>
      Может кто подскажет, как сделать для всех браузеров?
      Игорь
      02 февраля 2022, 16:53
      0
      Нашел такой кусок. работает во всех браузерах, но не нравится его обьем.

      работает:
      // Select all links with hashes
      $('a[href*="#"]')
        // Remove links that don't actually link to anything
        .not('[href="#"]')
        .not('[href="#0"]')
        .on('click', function(event) {
          // On-page links
          if (
            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
            && 
            location.hostname == this.hostname
          ) {
            // Figure out element to scroll to
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            // Does a scroll target exist?
            if (target.length) {
              // Only prevent default if animation is actually gonna happen
              event.preventDefault();
              $('html, body').animate({
                scrollTop: target.offset().top
              }, 1000, function() {
                // Callback after animation
                // Must change focus!
                var $target = $(target);
                $target.trigger('focus');
                if ($target.is(":focus")) { // Checking if the target was focused
                  return false;
                } else {
                  $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                  $target.trigger('focus'); // Set focus again
                };
              });
            }
          }
        });

      Укороченный вариант его, но не работает у меня…

      $('a[href*="#"]').on('click', function() {
        $('html, body').animate({
          scrollTop: $($.attr(this, 'href')).offset().top
        }, 400);
        return false;
      });
        Александр Мельник
        02 февраля 2022, 18:05
        0
        Ох страшное вы что то напридумали.
        У вас проблема в том, что если вы находитесь на одной странице, кликаете на пункт меню, который содержит якорную ссылку на элемент на этой же странице, у вас не закрывается меню?
        Почему не написать 3 строчки javascript которые при клике на ссылку в меню, кликнут по крестику закрывающему меню?
          Игорь
          02 февраля 2022, 22:00
          0
          так я уже так пробовал. меню закрывается, действия не происходило.

          сейчас уже все работает. последние посты мои помогли мне.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          7