проблема реализации плавного скролла по 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. Заранее спасибо. |
неужели сложно помочь? столько просмотров и ни одной мысли (((
|
Цитата:
|
не поможет, после скролла до # - 60 в конце перебрасывает все-равно на #. срабатывает location.hash = target.
|
Цитата:
history.pushState(null, null, target); |
Попробуй вот это код.. только замени свой клас блока где твое меню..
//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');
});
});
|
Рони, спасибо! заработало
|
| Часовой пояс GMT +3, время: 03:04. |