javascript - 通过数据属性滚动到 div 不起作用

Question

我正在尝试创建一个通过 data-id 在 div 上滚动的程序。我将 data-id 放在我的菜单上，并尝试在它们各自的 id div 上滚动它们。

这是我的 HTML 的样子：

<header>

    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-id="about" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-id="testimonials"  href="#">Testimonials</a>
                </li>
                <li class="nav-item border-button">
                  <a class="nav-link" href="#">Login</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>


  <section id="big-hero">
    <div class="container">
      <div class="row ">
        <div class="col-lg-5 pl-5">
          <h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
          <p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
        </div>
        <div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
      </div>
    </div>
  </section>

  <section id="about">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 mb-4">
          <h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
          <p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br>
          contact management for individuals, teams & small businesses.</p>
        </div>
        <div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
        <div class="offset-lg-1 col-lg-5">
          <p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy for you to:</p>
          <div class="icon-box">
            <i class="fa fa-users fa-2x icon-radius float-left"></i>
            <p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
          </div>
          <div class="icon-box">
            <i class="fa fa-tasks fa-2x icon-radius float-left"></i>
            <p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
          </div>
          <div class="icon-box">
            <i class="fa fa-book fa-2x icon-radius float-left"></i>
            <p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="testimonials">
      <div class="container">
      <div class="row">
      <div class="col-lg-12">

        <h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
        <p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br>
        I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br>
        look on my contacts per category. Definitely recommended."</p>
        <h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>

      </div>
    </div>
  </section>

  <footer>
    <p class="text-center">© Copyright 2020. All Rights Reserved.</p>
  </footer>

以下是我选择数据属性的方式，以便它们可以在每个 div 上平滑滚动：

<script>
  $('html, body').animate({
      scrollTop: $( '#' + data_id).offset().top
  }, 'slow');
</script>

不知何故，这不起作用。我想知道如何解决这个问题，以便每个数据 ID 可以滚动到每个 div？

标签： javascriptjquerycss

Answer 1

试试下面的代码

  $(".nav-link").click(function(){
  
  var topData= $( '#' + $(this).attr("data-id")).offset();
 
  $('html, body').animate({
      scrollTop: topData.top
  }, 'slow');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>

    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-id="about" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-id="testimonials"  href="#">Testimonials</a>
                </li>
                <li class="nav-item border-button">
                  <a class="nav-link" href="#">Login</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>


  <section id="big-hero">
    <div class="container">
      <div class="row ">
        <div class="col-lg-5 pl-5">
          <h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
          <p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
        </div>
        <div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
      </div>
    </div>
  </section>

  <section id="about">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 mb-4">
          <h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
          <p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br>
          contact management for individuals, teams & small businesses.</p>
        </div>
        <div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
        <div class="offset-lg-1 col-lg-5">
          <p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy for you to:</p>
          <div class="icon-box">
            <i class="fa fa-users fa-2x icon-radius float-left"></i>
            <p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
          </div>
          <div class="icon-box">
            <i class="fa fa-tasks fa-2x icon-radius float-left"></i>
            <p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
          </div>
          <div class="icon-box">
            <i class="fa fa-book fa-2x icon-radius float-left"></i>
            <p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="testimonials">
      <div class="container">
      <div class="row">
      <div class="col-lg-12">

        <h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
        <p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br>
        I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br>
        look on my contacts per category. Definitely recommended."</p>
        <h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>

      </div>
    </div>
  </section>

  <footer>
    <p class="text-center">© Copyright 2020. All Rights Reserved.</p>
  </footer>