Якорная ссылка на другую страницу и закрытие бокового меню
проблема в чем…
если нахожусь на странице 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
Комментарии: 7
/* закрытие меню после нажатии на ссылки в меню*/
$('.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>
Решено! Короче сам додумался методом тыка. Якори работают, ссылки обычные открывает
<a id="section-posldedstviya"></a><!-- якорь в нужном месте //--><li><a href="[[~1]]#section-posldedstviya" class="ps-4">Последствия</a></li>$('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" });
})
Может кто подскажет как сделать и плавный скролл сразу к месту якоря?
и так пробую
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);
});
браузеры оказывается поддерживают плавные скролы. но сафари не поддерживает
а так работает это кусок, кроме сафари:
а так работает это кусок, кроме сафари:
<a href="site.ru/#steer">Бычок</a>
<style>
html {
scroll-behavior: smooth; /* свойство scroll-behavior не наследуется, применяется к прокручиваемым блокам */
}
</style>
<h2 id="steer">Бычок</h2>
Нашел такой кусок. работает во всех браузерах, но не нравится его обьем.
работает:
Укороченный вариант его, но не работает у меня…
работает:
// 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;
});
Ох страшное вы что то напридумали.
У вас проблема в том, что если вы находитесь на одной странице, кликаете на пункт меню, который содержит якорную ссылку на элемент на этой же странице, у вас не закрывается меню?
Почему не написать 3 строчки javascript которые при клике на ссылку в меню, кликнут по крестику закрывающему меню?
У вас проблема в том, что если вы находитесь на одной странице, кликаете на пункт меню, который содержит якорную ссылку на элемент на этой же странице, у вас не закрывается меню?
Почему не написать 3 строчки javascript которые при клике на ссылку в меню, кликнут по крестику закрывающему меню?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
