Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.10.2015, 20:48
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

Плавный переход к элементу по внешней ссылке
Есть два файла:
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 занимаюсь с полгода. Также это мой первый пост на подобного рода форумах, так что если будут замечания по оформлению, приму к сведению.
Ответить с цитированием
  #2 (permalink)  
Старый 04.10.2015, 21:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

Сообщение от deniskutovskiy
Но такой переход не происходит с внешней ссылки
при загрузке проверять window.location.hash
Отсутствует плавный скроллинг по якорям
Ответить с цитированием
  #3 (permalink)  
Старый 04.10.2015, 22:48
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

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

Последний раз редактировалось deniskutovskiy, 04.10.2015 в 22:53.
Ответить с цитированием
  #4 (permalink)  
Старый 04.10.2015, 23:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

deniskutovskiy,
добавить пока нечего
Ответить с цитированием
  #5 (permalink)  
Старый 06.10.2015, 19:05
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

Сообщение от рони Посмотреть сообщение
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-го, эта проблема не дает о себе знать.
Есть ли что добавить тут?
Ответить с цитированием
  #6 (permalink)  
Старый 06.10.2015, 19:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

http://flesler.blogspot.ru/2007/10/j...scroll-10.html
Ответить с цитированием
  #7 (permalink)  
Старый 06.10.2015, 20:28
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

Сообщение от laimas Посмотреть сообщение
http://flesler.blogspot.ru/2007/10/j...scroll-10.html
Окей, получился скролл до элементов со всех страниц. Теперь вопрос:
В моем коде, тут:
scrollTop: jQuery(sel).offset().top-100

присутствует поправка — «-100» — именно на столько пикселей выше нужного элемента должен заканчиваться скролл (специфика верстки конкретной страницы). Это в принципе общее правило для сайта. Если эти плагины — не топорное решение, думаю, должно быть не сложным заложить такую поправку в код на jquery.scrollTo и jquery.localScroll.
Ответить с цитированием
  #8 (permalink)  
Старый 06.10.2015, 20:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

И дополнительно о нем же.
Ответить с цитированием
  #9 (permalink)  
Старый 06.10.2015, 21:04
Интересующийся
Отправить личное сообщение для deniskutovskiy Посмотреть профиль Найти все сообщения от deniskutovskiy
 
Регистрация: 02.10.2015
Сообщений: 18

Решил задачу с помощью jQuery.LocalScroll (спасибо laimas).
«Поправку» установил с помощью все того же параметра offset. Конечный код оказался проще, чем я думал:
$(document).ready(function(){
				
				$($.localScroll({
					hash: true,
					offset: -100
				}));
				
			});

«hash: true» подглядел как раз в
Сообщение от laimas Посмотреть сообщение
дополнительно о нем же.
Спасибо большое вам, товарищи, за приложенные усилия!
Ответить с цитированием
  #10 (permalink)  
Старый 07.10.2015, 03:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный переход к элекменту djonA Общие вопросы Javascript 4 20.05.2015 23:16
как сделать плавный переход для onmouseover Demidoff Общие вопросы Javascript 3 23.03.2014 11:52
плавный переход через javascript blacklool (X)HTML/CSS 1 19.01.2014 15:04
Как сделать плавный переход к элементу на сайте ? dimaan777 jQuery 2 03.05.2011 17:45
JS и getURL плавный переход к anchor Blizzart Общие вопросы Javascript 4 16.01.2011 17:48