我的横向滚动网站不适用于平滑滚动

Question

您好，我在我的网站上加入了 jquerys 平滑滚动，但它不起作用，我改变了我的网站，您可以向右滚动。我已经尝试过 smooth-behaviour，这确实有效。

Javascript:

$(document).ready(function () {
  // Add smooth scrolling to all links
  $("a").on("click", function (event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $("html, body").animate(
        {
          scrollTop: $(hash).offset().top,
        },
        800,
        function () {
          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        }
      );
    } // End if
  });
});

Html:

<img src="icon/logo.svg" alt="logo" class="logo">
<div class="navbar">
  <a href="#home" class="nav-a">Home</a>
  <a href="#about" class="nav-a">About</a>
  <a href="#arbeiten" class="nav-a">Projekte</a>
  <a href="#dokumentation" class="nav-a">Dokumentation</a>
</div>

Answer 1

请试试这个,

第一种方法

使用这个scroll-behaviour

html{
  scroll-behavior: smooth;
}

并使每个部分的 id 像这样，

  <div id="home">
    <p>home</p>
    <p>home</p>
    <p>home</p>
    <p>home</p>
  </div>

html{
  scroll-behavior: smooth;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://i.stack.imgur.com/pDKtO.png" alt="logo" class="logo">
<div class="navbar">
  <a href="#home" class="nav-a">Home</a>
  <a href="#about" class="nav-a">About</a>
  <a href="#arb" class="nav-a">Projekte</a>
  <a href="#doc" class="nav-a">Dokumentation</a>
  
  <div id="home">
    <p>home</p>
    <p>home</p>
    <p>home</p>
    <p>home</p>
  </div>
  
  <div id="about">
    <p>about</p>
    <p>about</p>
    <p>about</p>
    <p>about</p>
  </div>
  
  <div id="arb">
    <p>arbeiten</p>
    <p>arbeiten</p>
    <p>arbeiten</p>
    <p>arbeiten</p>
  </div>
  
  <div id="doc">
    <p>dokumentation</p>
    <p>dokumentation</p>
    <p>dokumentation</p>
    <p>dokumentation</p>
  </div>
  
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
</div>

第二种方法

在 body,html 元素中使用 .animate() 方法。

我为链接添加了一个属性 target-toggle

<a href="#" target-toggle="#home" class="nav-a">Home</a>

if($('[target-toggle]').length) {
  $('[target-toggle]').on("click",function () {
    var $target_value = $(this).attr("target-toggle");
    if($($target_value).length) {
      $('html, body').stop().animate({
        scrollTop: ($($target_value).offset().top)
      }, 1000);
    }
    event.preventDefault();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://i.stack.imgur.com/pDKtO.png" alt="logo" class="logo">
<div class="navbar">
  <a href="#" target-toggle="#home" class="nav-a">Home</a>
  <a href="#" target-toggle="#about" class="nav-a">About</a>
  <a href="#" target-toggle="#arb" class="nav-a">Projekte</a>
  <a href="#" target-toggle="#doc" class="nav-a">Dokumentation</a>
  
  <div id="home">
    <p>home</p>
    <p>home</p>
    <p>home</p>
    <p>home</p>
  </div>
  
  <div id="about">
    <p>about</p>
    <p>about</p>
    <p>about</p>
    <p>about</p>
  </div>
  
  <div id="arb">
    <p>arbeiten</p>
    <p>arbeiten</p>
    <p>arbeiten</p>
    <p>arbeiten</p>
  </div>
  
  <div id="doc">
    <p>dokumentation</p>
    <p>dokumentation</p>
    <p>dokumentation</p>
    <p>dokumentation</p>
  </div>
  
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
  <p>navbar</p>
</div>

我的横向滚动网站不适用于平滑滚动

My sideways scroolling website doesn't work with smooth scroll

javascript

html

jquery

css

smooth-scrolling

第一种方法

第二种方法