Анимация прокрутки Bootstrap 4 не работает - PullRequest
Новая
       14

Анимация прокрутки Bootstrap 4 не работает

0 голосов
/ 29 июня 2019

Я пытаюсь реализовать плавную прокрутку анимации с использованием начальной загрузки 4.3.1 и jquery 3.3.1 scrollspy, но я не могу заставить ее работать.Кажется, что прокрутка-шпион работает, но по какой-то причине анимация отсутствует.В старых версиях bootstrap и jquery этот код работает нормально.Любая помощь?

jsfiddle demo 

$('Html, body').scrollspy({
  target: ".navbar",
  offset: 0
});

// Add smooth scrolling on all links inside the navbar
$("myNavbar a").on('click', function(event) {

  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });

  } // End if

});
<body style="position:relative">

  <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="#myNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#section1">section1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">section2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">section3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">section4</a>
        </li>
      </ul>
    </div>
  </nav>

  <div id=section1 class="container-fluid">
    <h2>section1</h2>
    <p>IIam a sefl teaching web developer Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, facilis, iure</p>
  </div>
  <div id=section2 class="container-fluid">
    <h2>section2</h2>
    <p>Iam a sefl teaching web developer Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, facilis, iure</p>
  </div>
  <div id=section3 class="container-fluid">
    <h2>section3</h2>
    <p>Iam a sefl teaching web developer Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, facilis, iure</p>
  </div>
  <div id=section4 class="container-fluid">
    <h2>section4</h2>
    <p>Iam a sefl teaching web developer Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, facilis, iure</p>
  </div>

1 Ответ

0 голосов
/ 11 июля 2019

Я использовал минимальную версию jquery, в которой нет функции animate. Я просто использовал не минимальную версию, и она отлично работает.

...