Есть два файла:
1) файл menu.php:
<?php
include("header.php");
?>
...............................
<div id="dish"></div>
...............................
файл header.php, в котором находится хедер с навигацией (выпадающее меню), инклудом прикрепленный ко всем остальным страницам. В скрипте находится код JQuery, осуществляющий плавный скролл к элементу:
...............................
<script>
$(document).ready(function(){
function scrollToDiv(element,navheight){
var offset = element.offset();
var offsetTop = offset.top;
var totalScroll = offsetTop-navheight-60;
$('body,html').animate({
scrollTop: totalScroll
}, 1500);
}
$('div.col ul li a').click(function(){
var el = $(this).attr('href');
var elWrapped = $(el);
scrollToDiv(elWrapped,40);
return false;
});
});
<script>
...............................
<a href="#dish"></a>
...............................
Задача:
В рамках одной страницы (когда кликаю по ссылке в хедере, находясь в файле menu.php), плавный переход происходит без проблем. Но такой переход не происходит с внешней ссылки (например, если кликать на ту же ссылку в файле index.php — тоже включающем header.php): понятное дело указанная ссылка — #dish — не полная. Первое, что пришло мне в голову — добавить полную ссылку на элемент (все файлы находятся в одном каталоге), таким образом
<a href="#dish"></a>
в хедере поменялся на
<a href="menu.php#dish"></a>
Но эта конструкция полностью убила плавный переход (даже в рамках одной страницы).
Нужно, чтобы со всех страниц при клике по этой ссылке произошел переход на страницу menu.php, после чего плавный переход к элементу dish.
Знаю, что что-то упускаю, прошу помочь кто чем сможет. В JS я новичок (1 неделя), JQuery код нашел в интернете (подогнал под себя), с фреймворком только начал знакомиться. В общем HTML/CSS/PHP занимаюсь с полгода. Также это мой первый пост на подобного рода форумах, так что если будут замечания по оформлению, приму к сведению.
