Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.08.2018, 16:34
Интересующийся
Отправить личное сообщение для komned37 Посмотреть профиль Найти все сообщения от komned37
 
Регистрация: 23.07.2018
Сообщений: 18

Плавный скролл к якорю с другой страницы
Добрый день!
Помогите в решении задачи

разметка:
<div class="top">
	<ul class="menu">
		<li><a href="/link1"></a></li>
		<li><a href="/link2"></a>
			<ul class="sub-menu">
				<li><a href="#blok1"></a></li>
				<li><a href="#blok2"></a></li>
				<li><a href="#blok3"></a></li>
			</ul>
		</li>
		<li><a href="/link3"></a></li>	
	</ul>
</div>

	<div id="blok1"></div>
	<div id="blok2"></div>
	<div id="blok3"></div>


код js:
function handler(event) {
    var hash = event.target.hash;
    var headerHeight = $('.top').height();

    if (hash) {
     

      var tag = $(hash);

      if ($(hash).length) {
        var offset = tag.offset().top - headerHeight;
        $('html, body').stop().animate({scrollTop: offset}, 2000);
      }
    }
  }

  $('.top-menu a').on( "click", handler );


Когда нахожусь на главной странице, навигация работает хорошо, но как только перехожу на какую то внутреннюю, к примеру "/link3" и пытаюсь с нее вернуться на главную к какому то блоку, то переход осуществляется, а скролла нет.
Ответить с цитированием
  #2 (permalink)  
Старый 06.08.2018, 16:43
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

function handler(event) {
    var hash = typeof event === 'string' ? event : event.target.hash;
    var headerHeight = $('.top').height();

    if (!hash)
        return


    var tag = $(hash);

    if (tag.length) {
        var offset = tag.offset().top - headerHeight;
        $('html, body').stop().animate({
            scrollTop: offset
        }, 2000);
    }

}

$('.top-menu a').on("click", handler);
$(function() {
    handler(location.hash);
});

Последний раз редактировалось Nexus, 06.08.2018 в 16:45.
Ответить с цитированием
  #3 (permalink)  
Старый 06.08.2018, 19:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

в который раз поднимается эта тема, буду удивлён, если её наконец решат.
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2018, 12:18
Интересующийся
Отправить личное сообщение для komned37 Посмотреть профиль Найти все сообщения от komned37
 
Регистрация: 23.07.2018
Сообщений: 18

Спасибо все работает, но появилась еще одна проблема, надо было наверно сразу указывать.
Когда нахожусь на главной странице, в меню при клике на ссылки sub-menu скрываются и появляются блоки. это реализовано следующим образом:
$(".menu .sub-menu li").click(function(){
    $(".yslygi .yslygi-tabs .yslygi-tab").removeClass('active');
    $(".yslygi-cont-tab").hide();
    $(".yslygi-wrap").css({"position":"absolute", "opacity":"0"}).eq($(this).index()).css({"position":"relative", "opacity":"1"}).addClass("active");
    $(".yslygi-cont-tab.active").show();    
  });

Когда нахожусь на внутренней странице и перехожу по ссылке sub-menu то попадаю всегда к открытой первой, даже если кликнул на вторую или третью.
Как мне хешировать порядковый номер ссылки sub-menu и передать его потом на главную в форму выбора для показа блока
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показ части другой страницы kosty@ Общие вопросы Javascript 0 22.10.2016 10:21
Когда скролл страницы вверху tohenson Общие вопросы Javascript 1 09.09.2015 09:49
Плавный скролл колёсиком Alerto Элементы интерфейса 5 27.08.2009 11:46
Две одинаковые страницы: на одной скрипты видны, на другой нет Маня Общие вопросы Javascript 9 03.06.2009 11:57
Вставка текста с одной страницы в форму на другой странице Dima Общие вопросы Javascript 19 22.01.2009 17:35