使用jQuery或JavaScript添加平滑滚动

Question

我刚开始编码并希望在锚点之间创建平滑的动画。我不介意这是与JavaScript还是JQuery结合使用，但是我都是新手，所以我可能不明白。

我已经尝试过JavaScript和JQuery这段代码（https://css-tricks.com/snippets/jquery/smooth-scrolling/），但由于某种原因都无法使用。 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>