Переход по якорям с внутрених страниц

Рейтинг: 0Ответов: 1Опубликовано: 17.02.2015

Доброго времени суток.

Возникла необходимость в написании скрипта. Но даже не знаю, с чего начать.

Вот код html:

<body class="index-body">
  <a name="media"></a>
  <a name="AbautUs"></a>
  <a name="index"></a>
</body>

Вот само меню:

<menu>
     <li> 
        <a href="#media">меню 1 </a>
    </li>
    <li> 
        <a href="#AbautUs">меню 2 </a>
    </li>
    <li> 
        <a href="#index">меню 3 </a>
    </li>
</menu>

Скрипт должен выполнять следующее: при заходе на странцу должен осуществляться переход по якорю "index", а если с внутрених страниц, то потому якорю, на который было нажато.

Причем, как это сделать по отдельности, я знаю, но вот как это осуществить вместе, ума не приложу.

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Вначале не совсем понял, чего хочет автор, но в комментарии к ответу пришло больше понимания, поэтому рискну предложить такой вариант на JS, только добавьте всем блокам id, такие же как name, так проще перевести хэш в селектор:

// Для переходов с внешних ссылок
$(window).load(function() {
    var questionHash;
    if (window.location.hash) {
        questionHash = window.location.hash; // Если ссылка содержит хэш, то переходим на якорь по этому хэшу
    } else {
        questionHash = '#index'; // Если хэша нет, то переходим на якорь index
    }

    var offsetTop = questionHash === '#' ? 0 : $(questionHash).offset().top - 100;

    $("html,body").stop().animate ({
        scrollTop: offsetTop
    }, 10);
});

// Для внутренних ссылок на странице (это обычный вариант), заранее нужно присвоить всем ссылкам класс link
$('.link').click(function(e){
    var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top;
    $('html, body').stop().animate({
        scrollTop: offsetTop
    }, 300);
    e.preventDefault();
});