Плавная прокрутка к элементам

Стоит задача сделать плавную прокрутку к элементам шаблона, как на главной странице, так и с других страниц.

Прокрутка должна быть плавной.

Ссылки в меню выглядят так, пример: /#what

Сам якорь прописан так:  <a id=«what»></a>

Добавлен скрипт:

document.addEventListener('DOMContentLoaded', function() {
    // Получаем все ссылки с якорями на странице
    const anchorLinks = document.querySelectorAll('a[href^="#"]');
 
    // Добавляем обработчик события для каждого элемента
    anchorLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            // Предотвращаем стандартное действие ссылки
            event.preventDefault();
 
            // Получаем ID элемента из href атрибута ссылки
            const targetId = this.getAttribute('href').substring(1);
            // Находим целевой элемент по ID
            const targetElement = document.getElementById(targetId);
 
            // Проверяем, что целевой элемент найден
            if (targetElement) {
                // Используем scrollIntoView с параметром smooth для плавной прокрутки
                targetElement.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
});

Все работает, кроме плавной прокрутки.

Подскажите пжл куда она затерялась? 😀

 Abobo, 

Сам якорь прописан так:  <a id=«what»></a>

А должен быть так: <a id=«#what»></a>

И, вообще зачем вам нативный JS, если у InstantCms есть Jquery? Код получится намного меньше и красивее. То же самое что у вас можно описать так:

$(document).ready(function() {
      $('a[href^="#"]').on('click', function(event) {
          var target = $(this.getAttribute('href'));
          if (target.length) {
              event.preventDefault();
              $('html, body').stop().animate({
                  scrollTop: target.offset().top
              }, 1000);
          }
      });
  });

Демо можно посмотреть тут — https://checkpassword.7oz.ru кликните на пунтк меню «Активность»

 Abobo, 

Сам якорь прописан так:  <a id=«what»></a>

А должен быть так: <a id=«#what»></a>

И, вообще зачем вам нативный JS, если у InstantCms есть Jquery? Код получится намного меньше и красивее. То же самое что у вас можно описать так:

$(document).ready(function() {
      $('a[href^="#"]').on('click', function(event) {
          var target = $(this.getAttribute('href'));
          if (target.length) {
              event.preventDefault();
              $('html, body').stop().animate({
                  scrollTop: target.offset().top
              }, 1000);
          }
      });
  });

Демо можно посмотреть тут — https://checkpassword.7oz.ru кликните на пунтк меню «Активность»

Благодарю за Ваш вариант, но у меня он что-то не работает. Ищу причину...

 Abobo, не работать может по множеству причин. Например — наличие фиксированного хедера или других элементов, которые могут влиять на позиционирование. Или в CSS что-то может мешать. В любом случае — ищите проблему в консоли. Мой вариант как видно, работает отлично, но на моем сайте)

 Abobo, не работать может по множеству причин. Например — наличие фиксированного хедера или других элементов, которые могут влиять на позиционирование. Или в CSS что-то может мешать. В любом случае — ищите проблему в консоли. Мой вариант как видно, работает отлично, но на моем сайте)

Поправил ссылку в меню, у меня было так прописано: /#what — это для того чтобы якорь работал с других страниц. 

Прописал просто: #what (без слеша)

Стало работать норм. Но, с других страниц теперь формируется другая ссылка, нерабочая.

На главной все ок.

С других страниц, к примру статьи где размещены — не работает...

 Abobo, Ну тогда нужно ваш js надо немного переписать. Примерно так:

$(document).ready(function() {
    $('a[href^="#"]').on('click', function(event) {
        // Определяем, находимся ли мы на главной странице
        var isHomePage = window.location.pathname === '/';
 
        // Получаем атрибут href ссылки
        var href = $(this).attr('href');
 
        // Если мы не на главной странице и ссылка начинается с якоря, добавляем слеш
        if (!isHomePage && href.startsWith('#')) {
            // Полный путь для перехода на главную страницу с якорем
            href = '/' + href;
        }
 
        // Если мы на главной странице или ссылка не начинается с якоря, используем исходный href
        var target = $(href);
 
        if (target.length) {
            event.preventDefault();
            $('html, body').stop().animate({
                scrollTop: target.offset().top
            }, 1000);
        } else if (!isHomePage && href.startsWith('/#')) {
            // Если элемент не найден и мы не на главной странице, перенаправляем на главную страницу с якорем
            window.location.href = href;
        }
    });
});
 

Так, версия выше немного неправильная. Вот так будет правильно:

$(document).ready(function() {
      $('a[href^="#"]').on('click', function(event) {
          // Определяем, находимся ли мы на главной странице
          var isHomePage = window.location.pathname === '/';
 
          // Получаем атрибут href ссылки
          var href = $(this).attr('href');
 
          // Если мы не на главной странице и ссылка начинается с якоря
          if (!isHomePage && href.startsWith('#')) {
              // Предотвращаем стандартное действие
              event.preventDefault();
              // Перенаправляем на главную страницу с якорем
              window.location.href = '/' + href;
          } else if (isHomePage) {
              // Если мы на главной странице, выполняем плавную прокрутку
              var target = $(href);
              if (target.length) {
                  event.preventDefault();
                  $('html, body').stop().animate({
                      scrollTop: target.offset().top
                  }, 1000);
              }
          }
      });
  });

• $(document).ready(function() {
• $('a[href^="#"]').on('click', function(event) {
• // Определяем, находимся ли мы на главной странице
• var isHomePage = window.location.pathname === '/';
•  
• // Получаем атрибут href ссылки
• var href = $(this).attr('href');
•  
• // Если мы не на главной странице и ссылка начинается с якоря
• if (!isHomePage && href.startsWith('#')) {
• // Предотвращаем стандартное действие
• event.preventDefault();
• // Перенаправляем на главную страницу с якорем
• window.location.href = '/' + href;
• } else if (isHomePage) {
• // Если мы на главной странице, выполняем плавную прокрутку
• var target = $(href);
• if (target.length) {
• event.preventDefault();
• $('html, body').stop().animate({
• scrollTop: target.offset().top
• }, 1000);
• }
• }
• });
• });

Спасибо огромное, это то что нужно! Замечательно работает 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 

А можно добавить в стили scroll-behavior developer.mozilla.org/ru/docs/Web/CSS/scroll-behavior и не мучаться… Работать будет на всех ссылках с якорями.

 Zau4man, у ТС несколько страниц на сайте, и с других страниц должен быть переход на главную к блоку #test, который доступен только на главной. Без js тут не выкрутиться

 Foxman23, кликните по Контакты в меню тут demo.zau4man.ru/applicants.html

Переместитесь на главную к блоку Контакты.

И все это благодаря одной строчке

html{scroll-behavior: smooth;}

 Zau4man, вы от меня чего хотите? Да, круто — работает. Но у ТС с самого первого сообщения был вопрос — как сделать на js. Я посоветовала как и привела примеры. Я что-то неправильно сделала? Или вы пытаетесь намекнуть что я глупая, и даю в корне неверные советы?

 Foxman23, в своем первом сообщении я обращался к автору темы. Но вы утвердительно отвергли идею

Без js тут не выкрутиться

Я всего лишь привел рабочий пример.

вы пытаетесь намекнуть

Ничего не пытаюсь. Моё сообщение было к тс. На его некорректность указали вы...

 Zau4man, в вашем первом сообщении непонятно, к кому вы обращаетесь, так что, если неправильно вас поняла, прошу извинить

Или вы пытаетесь намекнуть что я глупая, и даю в корне неверные советы?

Глупых людей не бывает :))) На самом деле решение от Заучмена, простое и лаконичное, я вот например не совсем понял ТС зачем ему решение на JS, хотя может там есть специфика.

Всем спасибо!