Scrollen, um Animation

Question

Ich erstellte einfache Link-Animation, um zu blättern, kann dieser Link sein, um im Abschnitt auf der gleichen Seite oder Link zu externen URL zu blättern, das Problem, dass wenn Sie auf die Schaltfläche ("Abschnitt 4") klicken finde eine seltsame Bewegung, das war das erste Problem.

---

Zweites Problem: dass, wenn der Benutzer klicken Sie auf die Schaltfläche auf eine andere Schaltfläche klicken Sie einmal mehr als dann wird die Scroll nicht funktionieren, bis die vorherige Klick beendet:
ist mein Code unten:

$(".links a").click(function() { 
 
      $("html, body").animate({ 
 
       scrollTop: $($(this).attr("href")).offset().top 
 
      }, 1400) 
 
     })

.links { 
 
    width:600px; 
 
    position:fixed; 
 
    top:0; 
 
    padding:20px; 
 
} 
 
.links a { 
 
    display:inline-block; 
 
    padding:10px 20px; 
 
    border:1px solid #0094ff; 
 
} 
 
.section { 
 
    width:400px; 
 
    height:200px; 
 
    margin:300px auto 600px; 
 
    background-color:#0094ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="links"> 
 
     <a href="#section1">Section 1</a> 
 
     <a href="#section2">Section 2</a> 
 
     <a href="#section3">Section 3</a> 
 
     <a href="#section4">Section 4</a> 
 
     <a href="http://google.com">External Link</a> 
 
    </div> 
 
    <div id="section1" class="section"></div> 
 
    <div id="section2" class="section"></div> 
 
    <div id="section3" class="section"></div> 
 
    <div id="section4" class="section"></div>

Hinweis: rate mir bitte nicht, irgendein plugin zu benutzen, das ich mehr und mehr über Javascript wissen möchte

Answer 1

Sie können e.preventDefault() verwenden.

Führen Sie das Ereignisargument in dem Click-Ereignis durch Ihre Funktion ändert:

$(".links a").click(function() { 

zu

$(".links a").click(function (e) { 

Jetzt können Sie das Standardereignis des Klick bearbeiten. Sie können dies mit preventDefaulthttps://developer.mozilla.org/en/docs/Web/API/Event/preventDefault tun.

Zweitens können Sie stop() verwenden, um die Animation zu beheben.

$(".links a").click(function (e) { 
 
    if ($(this).attr("href").charAt(0) == "#") { 
 
    e.preventDefault(); 
 
    $("html, body").stop().animate({ 
 
     scrollTop: $($(this).attr("href")).offset().top 
 
    }, 1400) 
 
    } 
 
});

.links{ 
 
       width:600px; 
 
       position:fixed; 
 
       top:0; 
 
       padding:20px; 
 
      } 
 
      .links a{ 
 
       display:inline-block; 
 
       padding:10px 20px; 
 
       border:1px solid #0094ff; 
 
      } 
 
      .section{ 
 
       width:400px; 
 
       height:200px; 
 
       margin:300px auto 600px; 
 
       background-color:#0094ff; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="links"> 
 
     <a href="#section1">Section 1</a> 
 
     <a href="#section2">Section 2</a> 
 
     <a href="#section3">Section 3</a> 
 
     <a href="#section4">Section 4</a> 
 
     <a href="http://google.com">External Link</a> 
 
    </div> 
 
    <div id="section1" class="section"></div> 
 
    <div id="section2" class="section"></div> 
 
    <div id="section3" class="section"></div> 
 
    <div id="section4" class="section"></div>

Answer 2

können Sie verwenden jQuery stop() Methode

$(".links a").click(function (e) { 
 
    var hrefLink = $(e.target).attr("href"); 
 
    var hrefSplitted = hrefLink.split("#"); 
 
    if(hrefSplitted.length == 2){ 
 
    e.preventDefault(); 
 
    }; 
 
      /* if(! $(e.target).is('.links a:last')){ 
 
       e.preventDefault(); 
 
      }*/ 
 
      
 
      $("html, body").stop(); 
 
      $("html, body").animate({ 
 
       scrollTop: $($(this).attr("href")).offset().top 
 
      }, 1400) 
 
     })

.links{ 
 
       width:600px; 
 
       position:fixed; 
 
       top:0; 
 
       padding:20px; 
 
      } 
 
      .links a{ 
 
       display:inline-block; 
 
       padding:10px 20px; 
 
       border:1px solid #0094ff; 
 
      } 
 
      .section{ 
 
       width:400px; 
 
       height:200px; 
 
       margin:300px auto 600px; 
 
       background-color:#0094ff; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="links"> 
 
     <a href="#section1">Section 1</a> 
 
     <a href="#section2">Section 2</a> 
 
     <a href="#section3">Section 3</a> 
 
     <a href="#section4">Section 4</a> 
 
     <a href="http://google.com">External Link</a> 
 
    </div> 
 
    <div id="section1" class="section" style="background:red;"></div> 
 
    <div id="section2" class="section" style="background:blue;"></div> 
 
    <div id="section3" class="section" style="background:green;"></div> 
 
    <div id="section4" class="section" style="background:yellow;"></div>

Answer 3

Sie e.preventDefault() Methode verwenden können, in diesem Beispiel verhindern e.preventDefault() wird die Verbindung von im Anschluss an die URL verhindern .

$(".links a").click(function (e) { 
    e.preventDefault(); 

}); 

Aber e.preventDefault() Es wird ein anderes Problem verursachen, weil, wenn Sie externen Link haben Sie nicht in der Lage sein, es zu öffnen, so was ist die Lösung, die Lösung Die Lösung ist, den Wert von href zu testen, wenn die href beginnen mit "#" Anruf e.preventDefault():

$(".links a").click(function (e) { 
    if ($(this).attr("href").charAt(0) == "#") { 
     e.preventDefault(); 
    } 
}); 

Sie auch, wenn der Link externer Link ist zu überprüfen, in neuem Tab öffnen:

$(".links a").click(function (e) { 
    if ($(this).attr("href").charAt(0) == "#") { 
     e.preventDefault(); 
    } 
    else { 
     $($(this)).attr("target","_blank") 
    } 
}); 

Schließlich können Sie mehrere Klicks mit stop() Methode verhindern.

Hier ist der endgültige Code:

$(".links a").click(function (e) { 
 
      if (this.getAttribute("href").charAt(0) == "#") { 
 
       e.preventDefault(); 
 
       $("html, body").stop(); 
 
       $("html, body").animate({ 
 
        scrollTop: $($(this).attr("href")).offset().top 
 
       }, 1400) 
 
      } 
 
      else { 
 
      $($(this)).attr("target","_blank") 
 
     } 
 
     })

.links{ 
 
    width:600px; 
 
    position:fixed; 
 
    top:0; 
 
    padding:20px; 
 
} 
 
.links a{ 
 
    display:inline-block; 
 
    padding:10px 20px; 
 
    border:1px solid #0094ff; 
 
} 
 
.section{ 
 
    width:400px; 
 
    height:200px; 
 
    margin:300px auto 600px; 
 
    background-color:#0094ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="links"> 
 
    <a href="#section1">Section 1</a> 
 
    <a href="#section2">Section 2</a> 
 
    <a href="http://google.com" target="_blank">External Link</a> 
 
    <a href="#section3">Section 3</a> 
 
    <a href="#section4">Section 4</a> 
 
</div> 
 
<div id="section1" class="section"></div> 
 
<div id="section2" class="section"></div> 
 
<div id="section3" class="section"></div> 
 
<div id="section4" class="section"></div>