Плавная прокрутка не будет работать с каруселью Bootstrap - PullRequest
Новая
       32

Плавная прокрутка не будет работать с каруселью Bootstrap

0 голосов
/ 15 мая 2019

Код будет переходить только к хешу href, а не к выполнению любого из jquery.

Я пробовал много разных способов плавной прокрутки, но ни один из них не работает

JQuery: 

$(document).ready(function() {
  $('a[href^="#"]').click(function() {
      var target = $(this.hash);
      if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
      if (target.length == 0) target = $('html');
      $('html, body').animate({ scrollTop: target.offset().top-64 }, 1000);
      return false;
  });
});

HTML: 

<section id="page-content">
    <div id="welcome">
        <div id="springfeild-carousel" class="carousel slide container" data-ride="carousel" data-interval="6000">
            <ol class="carousel-indicators">
                <li data-target="#springfeild-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#springfeild-carousel" data-slide-to="1"></li>
                <li data-target="#springfeild-carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="Banner1.png" alt="First slide">
              </div>
              <div class="carousel-item">
                  <img class="d-block w-100" src="Banner2.png" alt="Second slide">
              </div>
              <div class="carousel-item">
                  <img class="d-block w-100" src="Banner3.png" alt="Third slide">
              </div>
          </div>
          <a class="carousel-control-prev" href="#springfeild-carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#springfeild-carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <div id="welcome-text">
        <h2 class="green-shadow">Welcome to...</h2>
    </div>
    <div id="welcome-sf">
        <h2 class="green-shadow">Springfield Industries</h2>
    </div>
</div>
<div id="start-button">
    <h2>What can we do?</h2>
    <a href="#chemical-reaction">
        <img src="Target Shark.jpg" alt="Explore" id="im"></img>
    </a>
</div>
<div id="chemical-reaction">
    <div id="chemical-reaction-text">
        <h3>Chemical Reaction</h3>
        <p>Stuff about chemical rections</p>
    </div>
    <div id="chemical-reaction-picture">
        <img src="Stud Shark.jpg" alt="Springfield Industries Chemical Reaction">
    </div>
</div>

Я пытаюсь сгладить прокрутку до 64 пикселей над элементом. Тем не менее, это работает только тогда, когда я удаляю свою загрузочную карусель. Когда я добавляю загрузочную карусель, она будет прыгать и прыгать только в положение элемента, а не на 64 пикселя над ним.

РЕДАКТИРОВАТЬ: я добавил 

html{
    scroll-behavior: smooth;
}

к моему css, и теперь он сгладит прокрутку, но не до 64px над элементом. Я все еще не буду выполнять свой JQuery, хотя

...