使用jQuery上下滚动到div id

Question

这里是jQuery noob。我有一个固定的导航栏，其中我有一个关于div，我想点击滚动到页面的有关部分。现在正半途而废。如果我在“关于”部分的上方，单击div将成功地向下滚动到“关于”部分，但是如果我选择通过“关于”部分，如果我单击该按钮，它将不会滚动回它。我不知道如何让它向上滚动，而不是只能朝一个方向走。

这是我的HTML：

<nav>
  <div id="about-button">About</div>
  <div id="projects-button">Projects</div>
</nav>

<section class="about-me">
  <div class="about" id="about">
    <div class="about-box"><h1>About</h1></div>
      <div class="bio-box">
        <h3>Bio</h3>
        <p class="bio-text">Bio text yada yada.</p>
        <p class="bio-text">More bio text yada yada</p>
      </div>
    </div>
  </div>
</section>

<section class="projects-section">
  <div class="projects" id="projects">
     <div class="project-main"><h1>Projects</h1></div>
       <a class="project-link" href="">
         <div class="project-picture"></div>
       </a>
     <div class="project-title">Project Name</div>
  </div>
</section>

这是我的jQuery：

function scrollToSection() {
 $("#about-button").click(function() {
    $('html, body').animate({
        scrollTop: $("#about").offset().top
    }, 2000);
 });
}

Answer 1

我冒昧地根据您的评论添加了一些基本的CSS和更长的虚拟文本。两个按钮现在都正常工作了。

我对您的原始代码所做的更改：

• 删除scrollToSection()函数包装器。相反，$("#about-button")在$(document).ready()函数中。DOM元素单击处理程序通常属于这里，因此它们只有在页面完成加载后才处于活动状态。如果需要，可以重构函数调用，将"#about-button"和"#about"作为scrollToSection()函数的参数。
• 添加了一个"#projects-button"单击处理程序，因为它有助于完成示例。
• 在每个</div>闭合之前移除多余的</section>闭合。在</div>闭包之后，您已经有了一个</h1>。

​

$(document).ready(function() {
  $("#about-button").click(function() {
    $('html, body').animate({
      scrollTop: $("#about").offset().top
    }, 2000);
  });
  $("#projects-button").click(function() {
    $('html, body').animate({
      scrollTop: $("#projects").offset().top
    }, 2000);
  });
});

nav {
  position: fixed;
  border-bottom: 1px solid black;
  display: flex;
  width: 100%;
  top: 0;
  background-color: white;
}

nav>div {
  margin: 5px;
  border: 1px solid black;
  padding: 5px;
}

section {
  margin: 50px 0 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div id="about-button">About</div>
  <div id="projects-button">Projects</div>
</nav>

<section class="about-me">
  <div class="about" id="about">
    <div class="about-box">
      <h1>About</h1>
    </div>
    <div class="bio-box">
      <h3>Bio</h3>
      <p class="bio-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor, metus eu finibus commodo, dui nisl ullamcorper nibh, sit amet venenatis quam nisl id metus. Integer tempor urna diam, a sollicitudin ex pellentesque sit amet. In hac habitasse platea
        dictumst. Integer eget aliquet lacus, ut volutpat tortor. Maecenas sit amet dignissim tellus. Quisque magna velit, maximus sed feugiat ac, imperdiet vitae risus. Duis vitae faucibus nunc. Aliquam erat volutpat. Praesent porttitor augue id felis
        molestie, eu pulvinar velit sollicitudin. Vestibulum at iaculis nulla. Maecenas semper, urna ut pharetra semper, felis quam pharetra orci, eu luctus ipsum velit egestas eros. Aliquam dui justo, volutpat id mi sit amet, finibus tincidunt turpis.
        Suspendisse gravida a lorem eget interdum. Curabitur laoreet, ipsum quis faucibus iaculis, odio massa tincidunt ante, non hendrerit lacus dolor ut elit.
      </p>
      <p class="bio-text">
        Praesent scelerisque elit sit amet pretium rhoncus. Cras sagittis ex a nunc consectetur, eget congue felis imperdiet. Proin varius interdum nibh et auctor. Donec pharetra eget arcu non ultrices. Phasellus lacinia ultrices risus vel tincidunt. Vestibulum
        vitae erat ligula. Aliquam vestibulum volutpat felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris purus libero, fermentum sit amet quam sit amet, aliquam facilisis erat. Sed fermentum arcu diam.
        Proin iaculis commodo mi eget pharetra.
      </p>
    </div>
  </div>
</section>

<section class="projects-section">
  <div class="projects" id="projects">
    <div class="project-main">
      <h1>Projects</h1>
    </div>
    <a class="project-link" href="">
      <div class="project-picture"></div>
    </a>
    <div class="project-title">
      Morbi posuere id urna quis vestibulum. Proin semper dignissim nisi. Proin ut lectus ac est aliquam blandit vitae ut justo. Praesent fermentum lorem diam, pharetra tristique risus dapibus et. Fusce id urna arcu. Donec sit amet nulla laoreet neque congue
      placerat. Integer pretium laoreet ipsum ut sagittis. Aliquam feugiat volutpat arcu ac varius. Suspendisse a lorem ut justo sodales scelerisque elementum sed ligula. Donec ac porttitor lorem, et venenatis ipsum. Proin ut felis in augue consectetur
      dignissim quis vel dolor.
    </div>
  </div>
</section>

​

如果您真的想重构滚动到函数的内容：

• DOM单击处理程序仍然从$(document).ready()初始化。
• 我假设节名有意地与按钮和目标一致。否则，您将需要为按钮id和目标id传递单独的字符串参数。

​

function scrollToSection(section) {
  $("#" + section + "-button").click(function() {
    $('html, body').animate({
      scrollTop: $("#" + section).offset().top
    }, 2000);
  });
}

$(document).ready(function() {
  scrollToSection("about");
  scrollToSection("projects");
});

nav {
  position: fixed;
  border-bottom: 1px solid black;
  display: flex;
  width: 100%;
  top: 0;
  background-color: white;
}

nav>div {
  margin: 5px;
  border: 1px solid black;
  padding: 5px;
}

section {
  margin: 50px 0 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div id="about-button">About</div>
  <div id="projects-button">Projects</div>
</nav>

<section class="about-me">
  <div class="about" id="about">
    <div class="about-box">
      <h1>About</h1>
    </div>
    <div class="bio-box">
      <h3>Bio</h3>
      <p class="bio-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor, metus eu finibus commodo, dui nisl ullamcorper nibh, sit amet venenatis quam nisl id metus. Integer tempor urna diam, a sollicitudin ex pellentesque sit amet. In hac habitasse platea
        dictumst. Integer eget aliquet lacus, ut volutpat tortor. Maecenas sit amet dignissim tellus. Quisque magna velit, maximus sed feugiat ac, imperdiet vitae risus. Duis vitae faucibus nunc. Aliquam erat volutpat. Praesent porttitor augue id felis
        molestie, eu pulvinar velit sollicitudin. Vestibulum at iaculis nulla. Maecenas semper, urna ut pharetra semper, felis quam pharetra orci, eu luctus ipsum velit egestas eros. Aliquam dui justo, volutpat id mi sit amet, finibus tincidunt turpis.
        Suspendisse gravida a lorem eget interdum. Curabitur laoreet, ipsum quis faucibus iaculis, odio massa tincidunt ante, non hendrerit lacus dolor ut elit.
      </p>
      <p class="bio-text">
        Praesent scelerisque elit sit amet pretium rhoncus. Cras sagittis ex a nunc consectetur, eget congue felis imperdiet. Proin varius interdum nibh et auctor. Donec pharetra eget arcu non ultrices. Phasellus lacinia ultrices risus vel tincidunt. Vestibulum
        vitae erat ligula. Aliquam vestibulum volutpat felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris purus libero, fermentum sit amet quam sit amet, aliquam facilisis erat. Sed fermentum arcu diam.
        Proin iaculis commodo mi eget pharetra.
      </p>
    </div>
  </div>
</section>

<section class="projects-section">
  <div class="projects" id="projects">
    <div class="project-main">
      <h1>Projects</h1>
    </div>
    <a class="project-link" href="">
      <div class="project-picture"></div>
    </a>
    <div class="project-title">
      Morbi posuere id urna quis vestibulum. Proin semper dignissim nisi. Proin ut lectus ac est aliquam blandit vitae ut justo. Praesent fermentum lorem diam, pharetra tristique risus dapibus et. Fusce id urna arcu. Donec sit amet nulla laoreet neque congue
      placerat. Integer pretium laoreet ipsum ut sagittis. Aliquam feugiat volutpat arcu ac varius. Suspendisse a lorem ut justo sodales scelerisque elementum sed ligula. Donec ac porttitor lorem, et venenatis ipsum. Proin ut felis in augue consectetur
      dignissim quis vel dolor.
    </div>
  </div>
</section>

​

Answer 2

您不需要使用jQuery或JS.

将nav元素更改为实际链接应该有效。

<div id="about-button">About</div>
<div id="projects-button">Projects</div>

上面的代码应该变成..。

<a href='#about'>About</a>
<a href='#projects'>Projects</a>

a元素使用所需目标的id值作为它们的最终目的地。