Блог

Главная - Вопросы по программированию - как использовать плавную прокрутку с помощью jquery и с помощью класса?

как использовать плавную прокрутку с помощью jquery и с помощью класса?

#javascript #html #jquery

Вопрос:

Я работал над этим некоторое время и в значительной степени заблудился. Для второй части кода (которая помечена) у меня есть тег привязки (< a >) с именем класса < a>. Я хочу создать плавную прокрутку к элементу с помощью имени класса. Мне нужно использовать jquery в соответствии с тем, что от меня требуется. Я попробовал другой метод и, похоже, не могу заставить это работать.

В соответствии с HTML

  <a class="js--scroll" href="#">I’m hungry </a>

здесь находится кнопка, которая будет нажата, чтобы перейти в раздел веб-сайта, который мы хотим

 <section class="js--where-i-should-scroll-to">

это область, в которой я хочу прокрутить

Jquery, который я пытаюсь использовать:

 $(document).ready(function () {
  // for sticky nav
  $(".class1").waypoint(
    function (direction) {
      if (direction == "down") {
        $("nav").addClass("sticky");
      } else {
        $("nav").removeClass("sticky");
      }
    },
    {
      offset: "100px;",
    }
  );

ЧАСТЬ 2 jQuery

   var $root = $("html, body");

  $('a[href^=\"#"]').click(function () {
    var href = $.attr(this, "href");

    $root.animate(
      {
        scrollTop: $(href).offset().top,
      },
      500,
      function () {
        window.location.hash = href;
      }
    );
});

ПРИМЕЧАНИЕ: Я пытаюсь сгладить прокрутку с помощью класса в последней части HTML
ПРИМЕЧАНИЕ: Я использую jquery v3.6.0

Ответ №1:

вы можете выполнить эту задачу только с помощью CSS, просто добавьте CSS-код

 html {
scroll-behavior: smooth;
}

Создайте гиперссылку и раздел:

 <a href="#whereToScroll">GO TO</a>


<!-- The Page scrolled to here -->
<a name="whereToScroll"></a>
<section>
...
</section>

Комментарии:

1. Итак, вы говорите, что при использовании класса невозможно добавить плавный скрининг с помощью JQUERY. насколько я понимаю, код aboce поддерживается не для всех браузеров, поэтому для кросс-браузеров потребуется jquery?

Ответ №2:

В вашем HTML-коде: —

вы должны определить идентификатор для своего раздела

 <section id="js--where-i-should-scroll-to">

Затем перейдите к нему по гиперссылке, также укажите свой <a> тег rel="relativeanchor" для выбора запроса

  <a class="js--scroll" href="#js--where-i-should-scroll-to" rel="relativeanchor">I’m hungry </a>

В вашем jQuery ЧАСТЬ 2

Попробуйте изменить его на следующее:-

 $('a[rel="relativeanchor"]').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

Вот полностью работающая скрипка того, чего вы хотите достичь

Комментарии:

1. codepen.io/Sleven_/pen/JjWLReW не могли бы вы, пожалуйста, посмотреть на мой код, я не смог решить эту проблему

2. Я посмотрел в вашей ссылке на код, у вас есть 2 проблемы:- Во-первых, вы не использовали id в своем href attr. Во-вторых, вы импортировали waypoint неправильно. У меня есть копия вашего кода, работающего с липкой навигационной панелью здесь => > Код скрипки

3. Я заставил его работать с помощью скрипки, но в VS code live-сервере работает только верхняя половина кода, плавная прокрутка по какой-то причине не работает. идеи ану о том, почему

4. Кстати, спасибо вам за всю вашу помощь

Ответ №3:

Наконец-то я заставил его работать. Мне пришлось удалить переполнение, скрытое как в теле, так и в HTML

 HTML, body{
overflow: hidden
}

Это не сработает. Это остановит jquery от запуска анимации для плавной прокрутки. Вместо этого вам придется добавить переполнение: скрыто либо в тело, либо в HTML, но не в оба. Я рекомендую попробовать и то, и другое, потому что это повлияет на ваш сайт по-разному.

исправленный код

 html{
overflow:hidden
}

или

    body{
    overflow:hidden
    }
Метки: