javascript - 使用包裹在 DIV 元素中的按钮滚动到页面的特定部分

Question

好的，我的主页有不同的部分。

这是菜单栏的代码:

<div class="col-xs-10 text-right menu-1 main-nav">
  <ul>
    <li class="active"><a href="#" data-nav-section="home">Home</a></li>
    <li><a href="#" data-nav-section="services">Services</a></li>
    <li><a href="#" data-nav-section="about">About Digm</a></li>
    <li><a href="#" data-nav-section="contact">Contact Us</a></li>
    <li><a href="#" data-nav-section="audit"><b>FREE Audit</b></a></li>
  </ul>
</div>

就转到我需要它们的部分而言，这些工作正常。

但我也有包含在 DIV 元素中的用于幻灯片放映的按钮。如果我将它们设为外部链接以离开我的网站，这些按钮会起作用，但它们不会让我使用它们转到我可以通过菜单栏链接转到的相同部分。

这些是带有按钮的 DIV:

<div id="ubea-hero" class="js-fullheight" data-section="home">
  <div class="flexslider js-fullheight">
    <ul class="slides">
      <li style="background-image: url(images/img_bg_1.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
            <div class="slider-text-inner">
              <h2>It's time to shift strategies.</h2>
              <p><a href="#audit" data-nav-section="audit" class="btn btn-primary btn-lg">FREE Audit</a></p>
            </div>
          </div>
        </div>
        </li>
        <li style="background-image: url(images/img_bg_2.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
            <div class="slider-text-inner" text-align: center>
              <h2>Experience The Butterfly<br />Effect</h2>
                <p><a href="#aboutdigm" class="btn btn-primary btn-lg" data-nav-section="about">Read More</a></p>
            </div>
          </div>
        </div>
      </li>
      <li style="background-image: url(images/img_bg_3.jpg);">
        <div class="overlay"></div>
        <div class="container">
          <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
            <div class="slider-text-inner" text-align: center>
              <h2>Ready? Book A Consultation</h2>
              <p><a href="#" target="_blank" class="btn btn-primary btn-lg">Why Wait?</a></p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

我为 1 个部分编写的代码如下所示:

<div id="ubea-contact" data-section="contact" class="ubea-cover ubea-cover-xs" style="background-image:url(images/img_bg_2.jpg);">
  <div class="overlay"></div>
  <div class="ubea-container">
    <div class="row text-center">
      <div class="display-t">
        <div class="display-tc">
          <div class="col-md-12">
            <h3>If you have inquiries please email us at <a href="#"><b>info@blahblahblah.com</b></a></h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

有人知道为什么按钮不会滚动到各个部分吗？

Answer 1

anchor 元素 href 属性默认执行此操作。只需为目标元素提供与菜单 anchor 上的 href="#introduction" 相匹配的 id 属性。

<div>
  <ul>
    <li><a href="#intro" data-nav-section="services">Intro</a></li>
  </ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h4 id="intro">Intro</h4>
<p>Foo bar.</p>