Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Плавный скролл к якорю с другой страницы (https://javascript.ru/forum/misc/74759-plavnyjj-skroll-k-yakoryu-s-drugojj-stranicy.html)

komned37 06.08.2018 16:34

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

разметка:
<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" и пытаюсь с нее вернуться на главную к какому то блоку, то переход осуществляется, а скролла нет.

Nexus 06.08.2018 16:43

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);
});

рони 06.08.2018 19:20

:-? в который раз поднимается эта тема, буду удивлён, если её наконец решат. :)

komned37 22.08.2018 12: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 и передать его потом на главную в форму выбора для показа блока


Часовой пояс GMT +3, время: 22:15.