Как сделать, чтобы при переходе на новую страницу происходил плавный скрол к якорю?

  • 6 августа 2023 г. 7:14
Ответы на вопрос 7
Для этого необходимо использовать JavaScript. Например, для плавного скроллинга к якорю можно использовать следующий код:

<script>
window.onload = function() {
  // Условия для поиска якоря
  if (window.location.hash) {
    var hash = window.location.hash;
    // Плавный скроллинг к якорю
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 1000);
  }
};
</script>
$(document).ready(function(){
    $('body,html').scrollTop(0);
    $(".menu-item").on("click","a", function (event) {
        var id  = $(this).attr('href'),
            top = $(id).offset().top -70;
        $('body,html').animate({scrollTop: top}, 1500);
    });
    var hash = location.hash;
    if($(hash).length){
        var top = $(hash).offset().top -70;
        $('body,html').animate({scrollTop: top}, 1500);
    }
});
/* Выше приведен код, который поможет перейти на нужный якорь при загрузке страницы или при клике на соответствующее меню. 
.menu-item - класс пункта меню, на который можно кликать. Вы можете использовать любой другой класс.
*/

$(function() {
  $('a[href*="#1"]:not([href="#"])').click(function() {
/*Если у вас используется Bootstrap на сайте, то нужна эта проверка. В таком случае все якоря, на которые нужно прокручиваться, должны начинаться с #1, иначе модальные окна Bootstrap не будут работать.*/
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1500);
        return false;
      }
    }
  });
});
/* Выше приведен код, который позволяет скроллить страницу к нужному якорю. Этот код будет работать только на главной странице. */

Привет! Я могу предложить использовать оба этих кода вместе, если вы хотите иметь возможность прокручивать страницу к якорям не только на главной, но и на внутренних страницах. Просто подключите файл js перед закрывающим тегом body. Этот код протестирован на WordPress и должен работать без проблем.
$('.menu-item-1689').on('click', function() {
  $('html,body').animate({scrollTop: $('.kol-scrol').offset().top}, 1000);
});
$('.menu-item-1690').on('click', function() {
  $('html,body').animate({scrollTop: $('.pr-scrol').offset().top}, 1000);
});
$('.menu-item-1691').on('click', function() {
  $('html,body').animate({scrollTop: $('.dost-scrol').offset().top}, 1000);
});
$('.menu-item-1692').on('click', function() {
  $('html,body').animate({scrollTop: $('.onas-scrol').offset().top}, 1000);
});
$('.menu-item-1693').on('click', function() {
  $('html,body').animate({scrollTop: $('.kont-scrol').offset().top}, 1000);
});
Похожие вопросы