Прокрутите до раздела домашней страницы с анимацией jquery

Я хочу иметь возможность прокручивать раздел домашней страницы с помощью jquery. Но я хочу прокручивать домашнюю страницу независимо от того, на какой я странице.

HTML выглядит следующим образом:

<ul>
  <li class = "nav-item active">
    <a href = "#home" class = "nav-link p-0">Home </a>
  </li>
  <li class = "nav-item">
    <a href = "#about-us" class = "nav-link p-0">About us</a>
  </li>
  <li class = "nav-item">
    <a href = "#references" class = "nav-link p-0">References</a>
  </li>
</ul>

А функция jquery для анимации прокрутки выглядит следующим образом:

$(".nav-link").on("click", function (e) {
  e.preventDefault();
  var target = $(this).attr("href");
  $('html, body').animate({scrollTop: $(target).offset().top}, 800, 'linear');
});

Когда я нахожусь на домашней странице, то есть на URL-адресе www.my-url.com, и когда я нажимаю на .nav-link, он становится www.my-url.com/#about-us и прокручивается там, где нужно прокручивать с анимацией, и это нормально.

Но проблема в том, что когда я нахожусь не на домашней странице, а на другой странице, например www.my-url.com/some-page, а затем, когда я нажимаю на .nav-link, он становится www.my-url.com/some-page#about-us и не прокручивается.

Как я могу сначала перейти на домашнюю страницу, а затем применить анимацию прокрутки, если я нажму на ссылку с другой страницы, кроме домашней?

Любая идея?

«Проблема», которую вызывает /some-page#about-us, когда вы находитесь на /some-page, уже сама по себе не имеет ничего общего с какой-либо добавленной функцией прокрутки, а связана с тем, как работают относительные URL-адреса. («Когда я нажимаю на .nav-ссылку, она становится www.my-url.com/#about-us» - даже этого не должно происходить с кодом, который вы нам показали, потому что вы предотвратили действие ссылки по умолчанию и не установили хэш самостоятельно.)

— 17.12.2018 10:56

javascript jquery html css

17.12.2018 08:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

использовать это

<script>
document.querySelectorAll('a[href^ = "#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
    e.preventDefault();

    document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
    });
  });
});
</script>

Не могли бы вы дать еще какое-нибудь объяснение?

— 17.12.2018 08:37

17.12.2018 08:33