簡體   English   中英

我的橫向滾動網站無法使用平滑滾動

[英]My sideways scroolling website doesn't work with smooth scroll

嗨,我將 jquerys 平滑滾動到我的網站,但它不起作用,我將我的網站轉過來,您可以向右滾動。 我已經嘗試過平滑行為,這確實有效。

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
  });
});

網址:

<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>

請試試這個

第一種方法

使用這種滾動行為

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()方法。

我為鏈接目標切換添加了一個屬性

<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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM