За данный скрипт очень благодарен humster_spb первый его вариант опубликован здесь.
Скрипт:
jQuery(document).ready(function($) {
var myHash = location.hash; //получаем значение хеша
location.hash = ''; //очищаем хеш
if(myHash[1] != undefined){ //проверяем, есть ли в хеше какое-то значение
$('html, body').animate(
{scrollTop: $(myHash).offset().top - 110}
, 700); //скроллим за полсекунды
location.hash = myHash; //возвращаем хеш
};
});
В строке «.top — 110» цифра 110 означает отступ сверху, по этому при не надобности её стоит убрать. В остальном уверен все и так понятно по комментариям в коде.
Отличительная особенность скрипта заключается в правильной отработке плавного скрола при переходе к анкору страницы с других источников (или других страниц Вашего сайта), а так же при переходя по прямой ссылке к анкору страницы.
Иногда бывают случаи когда скрипт выше не срабатывает, в таких случаях можно воспользоваться аналогом ниже:
jQuery(document).ready(function() {
jQuery(window).bind("load", function() {
//Пример исключения ссылки:
//jQuery('a[href="#"]:not([href="#"],[href="#spu-209"],[href="#spu-211"],[href="#spu-212"],[href="#spu-213"],[href="#spu-214"],[href="#spu-215"],[href="#spu-217"])').click(function() {
jQuery('a:not(.spu-clickable)[href="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') ||
location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']');
if (target.length) {
jQuery("html, body").animate({
// $('html, body').animate({
scrollTop: target.offset().top - 37
}, 1000);
return false;
}
}
});
});
});
jQuery(window).load(function() {
function goToByScroll(id) {
jQuery("html, body").animate({
scrollTop: jQuery("#" + id).offset().top - 38
}, 1000);
}
if (window.location.hash != '') {
goToByScroll(window.location.hash.substr(1));
}
});
Взято здесь:
https://gist.github.com/niccolomineo/6adeb8942444b2a2a46669fb4306baf9
Если возникают проблемы в данной части кода:
.animate({scrollTop: jQuery("#"+id).offset().top - 0 }, 1000)
Меняем её на что-то такое:
.animate({scrollTop: jQuery("#"+id).offset({top:-0})}, 1000)
Иногда верстка может отличатся от указанного здесь селектора:
jQuery('html, body')
По этому вставляем свой селектор например делаем так:
jQuery('body.home')
Источник записи: https://mediadoma.com