javascript - 使用 jQuery 或 JavaScript 添加平滑滚动

Question

我对编码还很陌生，希望在我的 anchor 之间创建流畅的动画。我不介意这是使用 JavaScript 还是 JQuery，但是我对这两者都是新手，所以我可能不明白。

我已经尝试了这段代码 ( https://css-tricks.com/snippets/jquery/smooth-scrolling/ ) JavaScript 和 JQuery，但由于某种原因都没有奏效。jQuery:

$(document).ready(function()
{// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });});

HTML:

<div id="navbar">
    <div class="tab1">
    <a class="link1" href="#home">
        <div class="text1">Home</div>
    </a></div>
    <div class="tab2">
    <a class="link2" href="#work">
        <div class="text2">Work</div>
    </a></div>
    <div class="tab3">
    <a class="link3" href="#about">
        <div class="text3">About</div>
    </a></div>
</div>

<div id="container">

  <div id="fullscreen">

    <div class="box home" id="home">

    <div class="heading">
        <h1>Hi,</h1>
        <h2>I'm Nathan Wilson</h2>
        <h3>a Graphic Designer based in Nottingham, U.K.</h3>
    </div>

    </div>

    <div class="box work" id="work">

    </div>
    <div class="box about" id="about">

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

我已经删除了我尝试过的所有 Javascript，并将尝试我收到的任何建议。谢谢!

Answer 1

我已经采纳了我的评论并使其更简单。去除了一些绒毛。这是通过 JQuery 实现的平滑滚动。

$("a").on('click', function(event) {
  if (this.hash !== "") {
    event.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 1200, function() {
      window.location.hash = hash;
    });
  }
});

a {
  padding: 10px;
  color: black;
  text-decoration: none;
}

a:hover {
  color: #c62334;
}

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

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#work">Work</a>
  <a href="#about">About</a>
</div>

<div id="container">
  <div id="fullscreen">

    <div class="box home" id="home">
      <h1>Home</h1>
      <p>
        Cake halvah brownie. Croissant pudding macaroon danish marzipan. Brownie oat cake muffin. Candy canes candy canes jelly-o. Dragée jelly carrot cake. Carrot cake chocolate croissant marshmallow. Sweet roll caramels danish liquorice. Pie bonbon soufflé
        powder marshmallow halvah topping marzipan bonbon. Muffin gingerbread gummi bears jelly beans muffin tart. Macaroon pastry cheesecake jelly beans caramels brownie sugar plum cheesecake. Brownie cake brownie lemon drops cake fruitcake sesame snaps.
        Wafer ice cream wafer cupcake lollipop.</p>

      <div class="heading">
        <h1>your</h1>
        <h2>text</h2>
        <h3>here</h3>
      </div>

      <p>Macaroon sweet roll icing tart icing carrot cake jelly pastry jujubes. Gingerbread tart bonbon cheesecake macaroon cookie. Biscuit cookie sweet roll jelly beans bonbon. Sugar plum chocolate cake donut candy lollipop caramels cheesecake croissant
        cookie. Apple pie cake topping cotton candy sweet. Dessert muffin muffin pudding tootsie roll brownie chocolate bar croissant. Jujubes sugar plum gummies chocolate tart danish. Fruitcake cookie jelly-o cake powder powder cookie ice cream. Cupcake
        chocolate lollipop jelly ice cream pastry chupa chups. Gummi bears marzipan sugar plum jujubes marshmallow tiramisu pie. Chupa chups chupa chups candy canes jujubes. Soufflé sesame snaps carrot cake marshmallow. Danish lemon drops ice cream bear
        claw croissant.</p>

    </div>



    <div class="box work" id="work">
      <h1>Work</h1>
      <p>
        Cake halvah brownie. Croissant pudding macaroon danish marzipan. Brownie oat cake muffin. Candy canes candy canes jelly-o. Dragée jelly carrot cake. Carrot cake chocolate croissant marshmallow. Sweet roll caramels danish liquorice. Pie bonbon soufflé
        powder marshmallow halvah topping marzipan bonbon. Muffin gingerbread gummi bears jelly beans muffin tart. Macaroon pastry cheesecake jelly beans caramels brownie sugar plum cheesecake. Brownie cake brownie lemon drops cake fruitcake sesame snaps.
        Wafer ice cream wafer cupcake lollipop.</p>

      <p>Macaroon sweet roll icing tart icing carrot cake jelly pastry jujubes. Gingerbread tart bonbon cheesecake macaroon cookie. Biscuit cookie sweet roll jelly beans bonbon. Sugar plum chocolate cake donut candy lollipop caramels cheesecake croissant
        cookie. Apple pie cake topping cotton candy sweet. Dessert muffin muffin pudding tootsie roll brownie chocolate bar croissant. Jujubes sugar plum gummies chocolate tart danish. Fruitcake cookie jelly-o cake powder powder cookie ice cream. Cupcake
        chocolate lollipop jelly ice cream pastry chupa chups. Gummi bears marzipan sugar plum jujubes marshmallow tiramisu pie. Chupa chups chupa chups candy canes jujubes. Soufflé sesame snaps carrot cake marshmallow. Danish lemon drops ice cream bear
        claw croissant.</p>

    </div>

    <div  class="box about" id="about">
      <h1>About</h1>
      <p>
        Cake halvah brownie. Croissant pudding macaroon danish marzipan. Brownie oat cake muffin. Candy canes candy canes jelly-o. Dragée jelly carrot cake. Carrot cake chocolate croissant marshmallow. Sweet roll caramels danish liquorice. Pie bonbon soufflé
        powder marshmallow halvah topping marzipan bonbon. Muffin gingerbread gummi bears jelly beans muffin tart. Macaroon pastry cheesecake jelly beans caramels brownie sugar plum cheesecake. Brownie cake brownie lemon drops cake fruitcake sesame snaps.
        Wafer ice cream wafer cupcake lollipop.</p>

      <p>Macaroon sweet roll icing tart icing carrot cake jelly pastry jujubes. Gingerbread tart bonbon cheesecake macaroon cookie. Biscuit cookie sweet roll jelly beans bonbon. Sugar plum chocolate cake donut candy lollipop caramels cheesecake croissant
        cookie. Apple pie cake topping cotton candy sweet. Dessert muffin muffin pudding tootsie roll brownie chocolate bar croissant. Jujubes sugar plum gummies chocolate tart danish. Fruitcake cookie jelly-o cake powder powder cookie ice cream. Cupcake
        chocolate lollipop jelly ice cream pastry chupa chups. Gummi bears marzipan sugar plum jujubes marshmallow tiramisu pie. Chupa chups chupa chups candy canes jujubes. Soufflé sesame snaps carrot cake marshmallow. Danish lemon drops ice cream bear
        claw croissant.</p>

      <p>Macaroon sweet roll icing tart icing carrot cake jelly pastry jujubes. Gingerbread tart bonbon cheesecake macaroon cookie. Biscuit cookie sweet roll jelly beans bonbon. Sugar plum chocolate cake donut candy lollipop caramels cheesecake croissant
        cookie. Apple pie cake topping cotton candy sweet. Dessert muffin muffin pudding tootsie roll brownie chocolate bar croissant. Jujubes sugar plum gummies chocolate tart danish. Fruitcake cookie jelly-o cake powder powder cookie ice cream. Cupcake
        chocolate lollipop jelly ice cream pastry chupa chups. Gummi bears marzipan sugar plum jujubes marshmallow tiramisu pie. Chupa chups chupa chups candy canes jujubes. Soufflé sesame snaps carrot cake marshmallow. Danish lemon drops ice cream bear
        claw croissant.</p>

    </div>

  </div>
</div>