Плавный переход к элементу по внешней ссылке
 

Есть два файла:
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 занимаюсь с полгода. Также это мой первый пост на подобного рода форумах, так что если будут замечания по оформлению, приму к сведению.

при загрузке проверять window.location.hash
http://javascript.ru/forum/dom-windo...akoryam-2.html

Об этом совсем ничего не знаю. Куда нужно вставить код по ссылке? Попробовал поставить условием к каждой функции js-кода, также попробовал сделать проверку перед выполнением всего кода. Все в молоко.
Как понять логику моего затруднения (и предложенного решения)? Буду признателен за чуть более развернутый совет.

deniskutovskiy,
добавить пока нечего

Заменил свой код скрипта на представленный вами по ссылке на этот:

$(document).ready(function(){
				
				jQuery('div.col ul li a').click(function(){
				var sel = this.hash;
				jQuery('html, body').animate({
				scrollTop: jQuery(sel).offset().top-100
        			}, 900);
        			
				return false;
   				});
			});

Теперь появился плавный переход по ссылкам вида:

<a href="menu.php#dish"></a>

Но вот добавление этой части:

var hash = document.location.hash;
hash && jQuery('div.col ul li a[href *="'+hash+'"]').click();

заставляет страницу вести себя неадекватно: при переходе с другой страницы на первые 3 элемента скрипт сначала плавно скроллит к выбранному элементу, после чего резко начинает скроллить на определенное количество пикселей (почти до конца страницы, по разному в зависимости от выбранного элемента). Но при нажатии на остальные элементы списка, начиная с 4-го, эта проблема не дает о себе знать.
Есть ли что добавить тут?

Окей, получился скролл до элементов со всех страниц. Теперь вопрос:
В моем коде, тут:

scrollTop: jQuery(sel).offset().top-100

присутствует поправка — «-100» — именно на столько пикселей выше нужного элемента должен заканчиваться скролл (специфика верстки конкретной страницы). Это в принципе общее правило для сайта. Если эти плагины — не топорное решение, думаю, должно быть не сложным заложить такую поправку в код на jquery.scrollTo и jquery.localScroll.

У плагина есть параметры, читайте и смотрите примеры документации, определяйте необходимое.

И дополнительно о нем же.

Решил задачу с помощью jQuery.LocalScroll (спасибо laimas).
«Поправку» установил с помощью все того же параметра offset. Конечный код оказался проще, чем я думал:

$(document).ready(function(){
				
				$($.localScroll({
					hash: true,
					offset: -100
				}));
				
			});

«hash: true» подглядел как раз в Спасибо большое вам, товарищи, за приложенные усилия! :thanks:

Имейте ввиду, что этот плагин (обе его составляющие) зачастую включается в файл типа helper-plugins.js подключаемому в шаблонах, которые можно видеть в сети.