使用jQuery或JavaScript添加平滑滾動

Question

我剛開始編碼並希望在錨點之間創建平滑的動畫。 我不介意這是使用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>