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

проблема реализации плавного скролла по 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. Заранее спасибо.
Ответить с цитированием