PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Подправить рабочий JS код прокрутки до якоря с отступом сверху

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Описание: Есть рабочий код прокрутки до якоря, но если к ссылке якоря дописать страницу index.html, то код уже не работает

Поиск в теме | Версия для печати

Айратиус	Отправлено: 02 Апреля, 2015 - 08:53:56
Частый гость Покинул форум Сообщений всего: 192 Дата рег-ции: Нояб. 2012 Откуда: Россия Помог: 0 раз(а)	Всем доброго дня. Есть рабочий код, который проводит прокрутку до якоря http://jsfiddle[dot]net/mekwall/up4nu/ В нем ссылки CODE (html): скопировать код в буфер обмена <ul id="top-menu"> <li class="active"> <a href="#">Top</a> </li> <li> <a href="#foo">Foo</a> </li> <li> <a href="#bar">Bar</a> </li> <li> <a href="#baz">Baz</a> </li> </ul> И все работает. Но не работает если ссылка имеет такой вид CODE (html): скопировать код в буфер обмена <ul id="top-menu"> <li class="active"> <a href="index.html">Top</a> </li> <li> <a href="index.html#foo">Foo</a> </li> <li> <a href="index.html#bar">Bar</a> </li> <li> <a href="index.html#baz">Baz</a> </li> </ul> Помогите пожалуйста изменить JS чтобы при указании ссылки подобия index.html#foo (index.php#foo, any.php#foo) , скрипт тоже работал. Заранее благодарен за отзывчивость. Ну и соответственно сам JS CODE (javascript): скопировать код в буфер обмена jQuery(function ($) { // Cache selectors var lastId, topMenu = $("#top-menu"), topMenuHeight = topMenu.outerHeight()+33, // All list items menuItems = topMenu.find("a"), // Anchors corresponding to menu items scrollItems = menuItems.map(function(){ var item = $($(this).attr("href")); if (item.length) { return item; } }); // Bind click handler to menu items // so we can get a fancy scroll animation menuItems.click(function(e){ var href = $(this).attr("href"), offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; $('html, body').stop().animate({ scrollTop: offsetTop }, 300); e.preventDefault(); }); // Bind to scroll $(window).scroll(function(){ // Get container scroll position var fromTop = $(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; // Set/remove active class menuItems .parent().removeClass("active") .end().filter("[href=#"+id+"]").parent().addClass("active"); } });

Faraon-san	Отправлено: 02 Апреля, 2015 - 09:48:21
Посетитель Покинул форум Сообщений всего: 318 Дата рег-ции: Сент. 2013 Помог: 8 раз(а)	CODE (javascript): скопировать код в буфер обмена offsetTop = href === "#" ? 0 : $(href.split('#').pop()).offset().top-topMenuHeight+1;

Айратиус	Отправлено: 02 Апреля, 2015 - 09:57:10
Частый гость Покинул форум Сообщений всего: 192 Дата рег-ции: Нояб. 2012 Откуда: Россия Помог: 0 раз(а)	Faraon-san пишет: CODE (javascript): скопировать код в буфер обмена offsetTop = href === "#" ? 0 : $(href.split('#').pop()).offset().top-topMenuHeight+1; Стиль active присваивается, НО! пропала плавность перехода и отступ сверху не приминается в 33px

Faraon-san	Отправлено: 02 Апреля, 2015 - 09:59:20
Посетитель Покинул форум Сообщений всего: 318 Дата рег-ции: Сент. 2013 Помог: 8 раз(а)	CODE (javascript): скопировать код в буфер обмена offsetTop = href === "#" ? 0 : $('#'+href.split('#').pop()).offset().top-topMenuHeight+1;

Айратиус	Отправлено: 02 Апреля, 2015 - 10:02:18
Частый гость Покинул форум Сообщений всего: 192 Дата рег-ции: Нояб. 2012 Откуда: Россия Помог: 0 раз(а)	Faraon-san пишет: CODE (javascript): скопировать код в буфер обмена offsetTop = href === "#" ? 0 : $('#'+href.split('#').pop()).offset().top-topMenuHeight+1; Извини мой косяк. Теперь все работает, а стиль active не применяется (В первом случае тоже не применялся. Не там посмотрел) (Отредактировано автором: 02 Апреля, 2015 - 10:07:35)

Faraon-san	Отправлено: 02 Апреля, 2015 - 10:04:10
Посетитель Покинул форум Сообщений всего: 318 Дата рег-ции: Сент. 2013 Помог: 8 раз(а)	а ты $(window).scroll() используешь что бы class присвоить?

Айратиус	Отправлено: 02 Апреля, 2015 - 10:06:58
Частый гость Покинул форум Сообщений всего: 192 Дата рег-ции: Нояб. 2012 Откуда: Россия Помог: 0 раз(а)	Faraon-san пишет: а ты $(window).scroll() используешь что бы class присвоить? Ничего не скажу. Нашел этот метод в сети. В JS не рулю, только пхп

Faraon-san	Отправлено: 02 Апреля, 2015 - 10:13:43
Посетитель Покинул форум Сообщений всего: 318 Дата рег-ции: Сент. 2013 Помог: 8 раз(а)	CODE (javascript): скопировать код в буфер обмена jQuery(function ($) { // Bind click handler to menu items // so we can get a fancy scroll animation $('#top-menu').find('a').on('click', (function(){ var topMenuHeight = $('#top-menu').outerHeight()+33, href = $(this).attr('href'), obj = $('#'+href.split('#').pop()), offsetTop = href === '#' ? 0 : obj.offset().top-topMenuHeight+1; $('#top-menu').find('li.active').removeClass('active'); obj.closest('li').addClass('active'); $('html, body').stop().animate({ scrollTop: offsetTop }, 300); return false; }); });

Айратиус	Отправлено: 02 Апреля, 2015 - 10:26:33
Частый гость Покинул форум Сообщений всего: 192 Дата рег-ции: Нояб. 2012 Откуда: Россия Помог: 0 раз(а)	Faraon-san пишет: CODE (javascript): скопировать код в буфер обмена jQuery(function ($) { // Bind click handler to menu items // so we can get a fancy scroll animation $('#top-menu').find('a').on('click', (function(){ var topMenuHeight = $('#top-menu').outerHeight()+33, href = $(this).attr('href'), obj = $('#'+href.split('#').pop()), offsetTop = href === '#' ? 0 : obj.offset().top-topMenuHeight+1; $('#top-menu').find('li.active').removeClass('active'); obj.closest('li').addClass('active'); $('html, body').stop().animate({ scrollTop: offsetTop }, 300); return false; }); }); В 16 строке ошибку показывает какую-то (Uncaught ReferenceError: version is not defineddepartament:813 (anonymous function))

Faraon-san	Отправлено: 02 Апреля, 2015 - 10:31:24
Посетитель Покинул форум Сообщений всего: 318 Дата рег-ции: Сент. 2013 Помог: 8 раз(а)	CODE (javascript): скопировать код в буфер обмена jQuery(function ($) { // Bind click handler to menu items // so we can get a fancy scroll animation $('#top-menu').find('a').on('click', function(){ var topMenuHeight = $('#top-menu').outerHeight()+33, href = $(this).attr('href'), obj = $('#'+href.split('#').pop()), offsetTop = href === '#' ? 0 : obj.offset().top-topMenuHeight+1; $('#top-menu').find('li.active').removeClass('active'); obj.closest('li').addClass('active'); $('html, body').stop().animate({ scrollTop: offsetTop }, 300); return false; }); }); (Отредактировано автором: 02 Апреля, 2015 - 10:31:40)

Айратиус	Отправлено: 02 Апреля, 2015 - 10:56:53
Частый гость Покинул форум Сообщений всего: 192 Дата рег-ции: Нояб. 2012 Откуда: Россия Помог: 0 раз(а)	Вроде заработало, спасибо огромное!

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.