Как настроить переход по якорям с других страниц?

Question

[ole92]

Всем привет. Сталкиваюсь с данной проблемой не первый раз, сам так и не смог найти решения.

Есть лендинг, у него две страницы:

- Главная. Меню с переходами по якорям. (dev8.olmor.com.ua/)
Ссылки в меню оформлены так: #process

- Карточка товара. С таким же меню.(dev8.olmor.com.ua/inner.html)
Ссылки в меню оформлены так: index.html#process

Проблема:
Меню страницы "Карточка товара", работает как нужно, переходит по якорям, но не срабатывает этот скрипт и из-за этого скроллится ниже чем нужно.

$(function () {
var $page = $('html, body');
$('nav .nav-list a, .mouse-box a').click(function () {
$page.animate({
scrollTop: $($.attr(this, 'href')).offset().top - 85
}, 1000);
return false;
});
});

Может кто уже сталкивался с данной проблем. Как решить или возможно есть другая реализация.
Заранее спасибо за помощь.

Answer 1

[Александр]

а с какой стати скрипт сработает? Он срабатывает только по клику, а так работает стандартный механизм перехода по якорям.
Можно попробовать

$(document).ready(function() {
    if(location.hash) $('a[href="' + location.hash + '"]').click()
})

а вообще это конечно костыли, нужно правильно расставить якоря а вот это "- 85" убрать

Comments

[ole92]

Якоря расставлены правильно. Меню фиксированное и перекрывает часть раздела, поэтому -85.

[Александр]

ole92: вот именно про это я и пишу, ставьте якоря выше, или отказываетесь от нативного перехода по якорям, иначе "костыли".

[Givandos]

Нет тут никаких костылей.
Перенос якоря "хрен знает куда", только для цели корректного перехода - это уже плохой вариант, так как якорем можем выступать и id какого-то елемента, расположенного в потоке (внутри текста, к примеру).
А так как мы уже и так меняем стандартное поведение перехода по якорям (да и вообще зачастую и отображение ДОМа меняет с ног на голову), то сделать четкое указание положения после скрола - совсем не проблема.

[Александр]

Givandos: чего спорить? Мое мнение я высказал, убедить вы уж точно меня не убедите, после кода ниже ;)

Answer 2

[Givandos]

Попробуйте в этом направлении посмотреть. Вариант lebonnet тоже имеет право на жизнь, но он не отменяет событие системного скролла.

$(document).ready(function(){
  $(document).on('scroll', function(event){
    var target = window.location.hash;
    if (typeof hash != 'undefined' && hash != '') {
      event.stopPropogation(); // or event.preventDefault();
      ... // your function from scroll
    }
  });
});