Плавный переход к элементу по внешней ссылке
Есть два файла:
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 занимаюсь с полгода. Также это мой первый пост на подобного рода форумах, так что если будут замечания по оформлению, приму к сведению. |
Цитата:
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» подглядел как раз в Цитата:
|
Имейте ввиду, что этот плагин (обе его составляющие) зачастую включается в файл типа 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
}));
});
|
| Часовой пояс GMT +3, время: 03:03. |