Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.05.2019, 10:56
Новичок на форуме
Отправить личное сообщение для ichor Посмотреть профиль Найти все сообщения от ichor
 
Регистрация: 11.05.2019
Сообщений: 3

проблема реализации плавного скролла по id в меню сайта
Добрый день! Я новичок JS. Прошу помочь в поиске варианта реализации перехода по href на указанный id с плавным скроллом. Я нашел и внедрил в сайт следующий скрипт:

function filterPath(string) {
			  return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'');
			}
		
		var locationPath = filterPath(location.pathname);
		
				$('a[href*=#]').each(function() {
				  var thisPath = filterPath(this.pathname) || locationPath;
					  if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'')) {
						var $target = $(this.hash), target = this.hash;
							if (target) {
								  $(this).click(function(event) {

									event.preventDefault();
									var targetOffset = $target.offset().top;
										$('html, body').animate({scrollTop: targetOffset}, 1000, 'easeInOutSine', function() {
										  location.hash = target;
										});
								  });
							}
					  }
				});


этот вариант работает, в стандартном варианте. Но мне надо чтобы страница по # не "докручивалась" на 60 px до верха страницы. Я попробовал внести изменения: location.hash = target - 60 и var targetOffset = $target.offset().top - 60. Скрипт заработал корректно, но в адресной строке браузера пропадает название id и пишет http://домен/#NaN, а надо, к примеру, http://домен/#contacts. Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2019, 20:33
Новичок на форуме
Отправить личное сообщение для ichor Посмотреть профиль Найти все сообщения от ichor
 
Регистрация: 11.05.2019
Сообщений: 3

неужели сложно помочь? столько просмотров и ни одной мысли (((
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2019, 20:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,149

Сообщение от ichor
var targetOffset = $target.offset().top - 60
это должно работать.
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2019, 22:53
Новичок на форуме
Отправить личное сообщение для ichor Посмотреть профиль Найти все сообщения от ichor
 
Регистрация: 11.05.2019
Сообщений: 3

не поможет, после скролла до # - 60 в конце перебрасывает все-равно на #. срабатывает location.hash = target.
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2019, 23:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,149

Сообщение от ichor
location.hash = target.
history.pushState(null, null, target);
Ответить с цитированием
  #6 (permalink)  
Старый 15.05.2019, 13:26
Интересующийся
Отправить личное сообщение для nikoshot Посмотреть профиль Найти все сообщения от nikoshot
 
Регистрация: 16.10.2016
Сообщений: 11

Попробуй вот это код.. только замени свой клас блока где твое меню..
//ancor
        $(document).ready(function() {
            $(".menu .menu_item").on("click", "a", function(event) {
                //отменяем стандартную обработку нажатия по ссылке
                event.preventDefault();

                //забираем идентификатор бока с атрибута href
                var id = $(this).attr('href'),

                    //узнаем высоту от начала страницы до блока на который ссылается якорь
                    top = $(id).offset().top;

                //анимируем переход на расстояние - top за 1500 мс
                if (window.innerWidth <= 768) {
                    $('body,html').animate({
                        scrollTop: top - 50
                    }, 1500);
                } else {
                    $('body,html').animate({
                        scrollTop: top + 50 + 'px'
                    }, 1500);
                }
                $('.menu, .main').removeClass('open');
            });
        });
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с меню Gidz Общие вопросы Javascript 1 20.09.2013 23:10
вопрос по реализации 2-х уровнего меню Vempel Общие вопросы Javascript 8 12.08.2012 13:56
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 13:36
Вопрос реализации меню! 0931454574 jQuery 1 31.03.2011 15:33
Проблема с меню 856 Общие вопросы Javascript 3 28.07.2008 13:29