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

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

А можно ссылочку на какую-нибудь информацию по теме helper-plugins.js? Гугл в таком виде не выдает внятной подборки ссылок.

Эта "солянка" собирается разработчиком, может называть и как просто helper.js, так что кроме исходника вряд ли что-то найти. Как придется работать с готовым шаблоном, то не мешало бы сразу проверить какие скрипты подключаются, чтобы не дублировать.

Странное дело: вернулся к работе над сайтом и столкнулся с проблемой. Похоже, что она была изначально, но я не обратил внимание (рано обрадовался). В общем имеется:
Плавный переход к объектам в рамках одной страницы происходит верно.
НО: Переход с другой страницы происходит странно. Вместо скролла к нужному элементу (соответствующему id после # в url) происходит непонятный недоскролл (скажем на 1000 пикселей), и так с каждым элементом, к которому пытаюсь перейти (с другой страницы по адресу с хешем). То же происходит и при обновлении этой же самой страницы (с хешем в url). Наличие «offset: -100» на результат не влияет.
Я знал, что это было слишком простым решением задачи. Прошу помощи, товарищи!
Ссылку на сайт скинуть не могу (не имею права), но, если не совсем понятно ДАНО, могу состряпать демо, воспроизводящее проблему.

Жесть какая-то. В общем добавил код с другого сайта (последний пост ссылается на страницу с кодом). Каким-то образом прокатило. Пока работает. Если перестанет, отпишусь (даже проверил еще раз на всякий случай перед нажатием «Ответить»). В результате получил код:

//===== ДЛЯ ВНЕШНЕЙ ССЫЛКИ //
(function($){
  $(document).on("ready", function () {
      var urlHash = window.location.href.split("#")[1];
      $('html,body').animate({
          scrollTop: $('.' + urlHash + ', #' + urlHash +',[name='+urlHash+']').first().offset().top -100
      }, 1000);
  });
 
})(jQuery);

//===== ДЛЯ ЛОКАЛЬНОЙ ССЫЛКИ //
$(document).ready(function(){
				
				$($.localScroll({
					hash: true,
					offset: -100
				}));
				
			});