Глючит переход по якорям
Доброго времени суток!
Такая проблема: переделывал меню сайта, исправлял косяк с якорями, но вылез другой:( Сайт на modx, имеется дестопная и мобильная версии (вёрстка одинаковая), на десктопе при переходах по якорям главной страницs всё нормально, а на мобильной происходит такой глюк: нажимаешь на 1 ссылку на якорь - переходит нормально, подымаешься наверх, нажимаешь на другую ссылку на др. якорь - страница сначала листается до 1-го якоря, а потом уже до 2-го. И чем больше переходов - тем "веселее" такая карусель. Пробовал 2 варианта реализации: 1 вариант. Меню: <ul> <li class="level0"> <a title="Наша корпоративная жизнь и результаты работы" class="toAnchor" data-txt="about">О компании</a> </li> <li class="level0"> <a title="Проектирование, монтаж, сервис" class="toAnchor" data-txt="service">Услуги</a> </li> <li class="level0"> <a title="Оборудование, техническая информация" class="toAnchor" data-txt="catalog">Каталог продукции</a> </li> <li class="level0"> <a href="/monitoring#inform" title="Система мониторинга и управления" class="toAnchor">Показания</a> </li> <li class="level0"> <a title="Информация о нашем расположении, телефонах, филиалах и партнёрах" class="toAnchor" data-txt="contacts">Контакты</a> </li> <ul> Пример 1-го из якорей: <div> <a name="catalog" class="for_fix_menu"></a> </div> Сам скрипт:
$(document).ready(function(){
$('.toAnchor').click(function(e){
e.preventDefault();
if($('.fixed_top').is(':hidden')) {
$('.toAnchor').on("click", function () {
$('html, body').animate({ scrollTop: $('a[name="main"]').offset().top}, 400 );
$('html, body').animate({ scrollTop: $('a[name="'+$(this).data('txt')+'"]').offset().top}, 1000);
return false;
});
}
else {
$('html, body').animate({ scrollTop: $('a[name="'+$(this).data('txt')+'"]').offset().top}, 1000);
return false;
}
});
});
2 вариант. Меню:
<ul>
<li class="level0">
<a title="Наша корпоративная жизнь и результаты работы" class="toAnchor" onclick="scrollToContent('about')">О компании</a>
</li>
<li class="level0">
<a title="Проектирование, монтаж, сервис" class="toAnchor" onclick="scrollToContent('service')">Услуги</a>
</li>
<li class="level0">
<a title="Оборудование, техническая информация" class="toAnchor" onclick="scrollToContent('catalog')">Каталог продукции</a>
</li>
<li class="level0">
<a href="/monitoring#inform" title="Система мониторинга и управления" class="toAnchor">Показания</a>
</li>
<li class="level0">
<a title="Информация о нашем расположении, телефонах, филиалах и партнёрах" class="toAnchor" onclick="scrollToContent('contacts')">Контакты</a>
</li>
<ul>
Пример 1-го из якорей: <div> <a name="catalog" class="for_fix_menu"></a> </div> Сам скрипт:
function scrollToContent(anchor) {
if($('.fixed_top').is(':hidden')) {
$('.toAnchor').on("click", function () {
$('html, body').animate({ scrollTop: $('a[name="main"]').offset().top}, 500 );
$('html, body').animate({ scrollTop: $('a[name="'+anchor+'"]').offset().top}, 1000);
return false;
});
}
else {
$('html, body').animate({ scrollTop: $('a[name="'+anchor+'"]').offset().top}, 1000);
return false;
}
}
Оба варианта приводят к такому развитию событий...:help: Что не так? Я в js не особо, мне как-то ближе php и C#, но приходится углубляться |
Независимо от того, какую технологию вы используете для плавной прокрутки, доступность очень важна. Например, если вы щёлкнете ссылку с адресом #hash, браузер сфокусируется на элементе, соответствующему этому идентификатору. Страница может прокручиваться, но прокрутка является побочным эффектом изменения фокуса.
<a href="#hash">Go to hash</a> <!-- если нажать на такую ссылку, то произойдёт переход к элементу с таким же id --> <p id="hash">Here you are!</p>Именно такая техника называется переход по якорю. У вас же немного усложнено! Что касается анимации, то вам следует использовать свойство scroll-behaviour, что касается старых браузеров, то нужно учитывать, что здесь важен переход, а не анимация! Поэтому это кроссбраузерный вариант. Вот пример с вашими ссылками... (зачем изобретать велосипеды class="toAnchor" onclick="scrollToContent('catalog')" или data-txt="catalog", когда есть стандартное href="#catalog")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
scroll-behavior: smooth;
}
nav {
text-align: center;
background: white;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 10px;
}
nav a {
display: inline-block;
border-bottom: 1px solid;
color: #199cff !important;
cursor: pointer;
margin: 0 13px;
padding: 1px 0;
text-decoration: none;
}
nav a:hover,
nav a:focus {
border-bottom: none;
color: #fe0600 !important;
}
section {
color: #080;
border: solid;
border-width: thin 0;
background: #cfc;
max-width: 50em;
padding: 1em 2em;
margin: 15em auto;
}
</style>
</head>
<body>
<nav>
<a href="#about" title="Наша корпоративная жизнь и результаты работы">О компании</a>
<a href="#service" title="Проектирование, монтаж, сервис">Услуги</a>
<a href="#catalog" title="Оборудование, техническая информация">Каталог продукции</a>
<a href="/monitoring#inform" title="Система мониторинга и управления">Показания</a>
<a href="#contacts" title="Информация о нашем расположении, телефонах, филиалах и партнёрах">Контакты</a>
</nav>
<!-- пример -->
<section id="about">
<h2>О компании</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, voluptas eius laudantium nihil. Fuga similique ducimus perferendis earum cumque cupiditate, voluptatem vitae hic suscipit eligendi odit, corporis ex quibusdam quam.</p>
</section>
<section id="service">
<h2>Услуги</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione omnis quaerat minima sint eligendi! Maiores similique dolore iusto unde, iste odit fugit officiis earum deserunt distinctio eos magni pariatur sed?</p>
</section>
<section id="catalog">
<h2>Каталог продукции</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex odio quis, culpa, molestias error omnis id doloribus velit. Obcaecati nemo quaerat aperiam quia quidem doloribus numquam, reprehenderit eligendi, magnam tempora!</p>
</section>
<section id="contacts">
<h2>Контакты</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis pariatur nostrum consequuntur maiores qui expedita laboriosam voluptatem culpa repellendus voluptates saepe cumque, vel tempore, obcaecati nisi possimus hic. Beatae, quam.</p>
</section>
</body>
</html>
P. S. <a href="/monitoring#inform" title="Система мониторинга и управления">Показания</a> не работает в данном примере, поскольку там нужна страница monitoring, на которой произойдёт переход к inform |
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 01:53. |