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

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

проблема в чем…
если нахожусь на странице 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

4 030

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

Игорь

02 февраля 2022, 14:37

/* закрытие меню после нажатии на ссылки в меню*/
$('.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

Решено! Короче сам додумался методом тыка. Якори работают, ссылки обычные открывает

<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

Может кто подскажет как сделать и плавный скролл сразу к месту якоря?

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

браузеры оказывается поддерживают плавные скролы. но сафари не поддерживает

а так работает это кусок, кроме сафари:

<a href="site.ru/#steer">Бычок</a>

<style>
html {
  scroll-behavior: smooth; /* свойство scroll-behavior не наследуется, применяется к прокручиваемым блокам */ 
}
</style>

<h2 id="steer">Бычок</h2>

Может кто подскажет, как сделать для всех браузеров?

Игорь

02 февраля 2022, 16:53

Нашел такой кусок. работает во всех браузерах, но не нравится его обьем.

работает:

// 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

Ох страшное вы что то напридумали.
У вас проблема в том, что если вы находитесь на одной странице, кликаете на пункт меню, который содержит якорную ссылку на элемент на этой же странице, у вас не закрывается меню?
Почему не написать 3 строчки javascript которые при клике на ссылку в меню, кликнут по крестику закрывающему меню?

Игорь

02 февраля 2022, 22:00

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

сейчас уже все работает. последние посты мои помогли мне.

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