Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2019, 07:03
Новичок на форуме
Отправить личное сообщение для just-for-rem Посмотреть профиль Найти все сообщения от just-for-rem
 
Регистрация: 16.01.2019
Сообщений: 4

Глючит переход по якорям
Доброго времени суток!
Такая проблема: переделывал меню сайта, исправлял косяк с якорями, но вылез другой
Сайт на 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;
            }
        }

Оба варианта приводят к такому развитию событий... Что не так? Я в js не особо, мне как-то ближе php и C#, но приходится углубляться
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2019, 11:47
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 718

Независимо от того, какую технологию вы используете для плавной прокрутки, доступность очень важна. Например, если вы щёлкнете ссылку с адресом #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

Последний раз редактировалось Malleys, 17.01.2019 в 02:21.
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2019, 01:24
Новичок на форуме
Отправить личное сообщение для just-for-rem Посмотреть профиль Найти все сообщения от just-for-rem
 
Регистрация: 16.01.2019
Сообщений: 4

Сообщение от Malleys
когда есть стандартное href="#catalog"
Я его изначально и использовал, но тогда якоря появлялись в адресной строке, что не очень красиво, поэтому и решил намутить сие
Сообщение от Malleys
Именно такая техника называется переход по якорю. У вас же немного усложнено!
Я могу ошибаться, но разве не суть "перехода по якорю" - в самом якоре, а не в том, как осуществляется сам переход?))
Сообщение от Malleys
P. S. <a href="/monitoring#inform" title="Система мониторинга и управления">Показания</a> не работает в данном примере, поскольку там нужна страница monitoring, на которой произойдёт переход к inform
Само собой, это понятно) Просто не стал её код выкладывать, ибо это излишняя информация)
Сообщение от Malleys
<!-- пример -->
Спасибо большое!) Попробую вклинить это на наш сайт, вместо того, что есть, и отпишусь по результатам
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2019, 03:28
Новичок на форуме
Отправить личное сообщение для just-for-rem Посмотреть профиль Найти все сообщения от just-for-rem
 
Регистрация: 16.01.2019
Сообщений: 4

Сообщение от Malleys
html {
            scroll-behavior: smooth;
        }
Получилось, спасибо! На мобильных работает почти (моё раскладывающееся меню слева не успевает полностью сложится до того, как начнётся прокрутка вниз) нормально, на десктопе ещё не менял. Подскажите, а как изменять скорость прокрутки у этого свойства? Погуглил-погуглил - ничего не нашёл даже на англоязычных сайтах(((
Ответить с цитированием
  #5 (permalink)  
Старый 17.01.2019, 03:40
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 718

Сообщение от just-for-rem
Я его изначально и использовал, но тогда якоря появлялись в адресной строке... поэтому и решил намутить сие
Всё правильно, они должны там быть! Ведь если нажали на Контакты, по вы перейдёте к контактам и вы их видите. И если вы скопируете ссылку без якоря https://rem-prim.ru/ и поделитесь ею с кем-то, то тот человек не увидит тоже самое, что вы видите. Он увидит начало страницы. Но если у вас переход по якорю фиксируется в адресной строке, то вы уже копируете https://rem-prim.ru/#contacts и поделившись такой ссылкой, вы предоставляете возможность тем, кто будет переходить по ней, сразу попасть в раздел Контакты.

Сообщение от just-for-rem
в адресной строке, что не очень красиво
Пользователи мобильных браузеров(52%) и Safari(14%) не видят этого. В мобильном браузере адресная строка не раскрывается, когда происходит переход по якорю. В Safari виден host, только если вы не сфокусированы на адресной строке.
Ответить с цитированием
  #6 (permalink)  
Старый 17.01.2019, 04:13
Новичок на форуме
Отправить личное сообщение для just-for-rem Посмотреть профиль Найти все сообщения от just-for-rem
 
Регистрация: 16.01.2019
Сообщений: 4

Сообщение от Malleys Посмотреть сообщение
Всё правильно, они должны там быть! Ведь если нажали на Контакты, по вы перейдёте к контактам и вы их видите. И если вы скопируете ссылку без якоря https://rem-prim.ru/ и поделитесь ею с кем-то, то тот человек не увидит тоже самое, что вы видите. Он увидит начало страницы. Но если у вас переход по якорю фиксируется в адресной строке, то вы уже копируете https://rem-prim.ru/#contacts и поделившись такой ссылкой, вы предоставляете возможность тем, кто будет переходить по ней, сразу попасть в раздел Контакты.


Пользователи мобильных браузеров(52%) и Safari(14%) не видят этого. В мобильном браузере адресная строка не раскрывается, когда происходит переход по якорю. В Safari виден host, только если вы не сфокусированы на адресной строке.
А на счёт кастомизации вашего способа не подскажите? Как изменить скорость прокрутки?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный переход к элементу по внешней ссылке deniskutovskiy jQuery 13 16.10.2015 22:30
Переход по якорям на сайте одной кнопкой. malefikus13 Общие вопросы Javascript 11 01.10.2015 16:40
Переход по якорям через скролл Infinity178 jQuery 1 31.07.2015 10:30
Переход по метке <a href = #metka> с нажатием в <ul><li> papacoca (X)HTML/CSS 2 01.10.2014 14:09
JS и getURL плавный переход к anchor Blizzart Общие вопросы Javascript 4 16.01.2011 16:48