2017-09-03 1 views
-4

Ich habe versucht, ein "Click to Scroll" -Menü auf meiner Website (www.trianglesquad.com) zu machen. Ich habe einen Code aus w3schools.com "https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll" versucht. Ich stehe vor einem Problem. Es scrollt nicht zum perfekten Punkt. Wenn ich zum Beispiel auf "Portfolio" klicke, scrollt es zur Mitte des Portfoliobereichs. Es scrollt nach 3-4 Klicks zum perfekten Punkt. Jede Hilfe wird sehr geschätzt :)jQuery reibungsloser Bildlauf zum Element - funktioniert nicht richtig

Danke.

+1

Bitte schreiben Sie den relevanten HTML- und JS-Code, den Sie bisher versucht haben. –

+1

Willkommen bei stackoverflow - schön dich zu haben. Bitte lesen Sie [Wie stelle ich eine gute Frage?] (Https://stackoverflow.com/help/how-to-ask) und [Wie erstelle ich ein minimales, vollständiges und überprüfbares Beispiel] (https: // stackoverflow. com/help/mcve), um Stackover-Inhalte auf dem höchstmöglichen Level zu halten und Ihre Chancen zu erhöhen, eine passende Antwort zu erhalten. – Axel

Antwort

0

Nicht sicher, warum alle Down-Stimmen, wie wir alle Anfänger in einem Stadium waren ... Vielleicht für zukünftige Beiträge, versuchen Sie, eine JS-Geige mit einem Beispiel zu erstellen und genauer zu sein.

können Sie das Scrollen durch Addieren oder Subtrahieren von der Offset ändern Offset nach unten Beispiel:

$(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 -200 
     }, 800, function(){ 

     // Add hash (#) to URL when done scrolling (default click behavior) 
     window.location.hash = hash; 
     }); 
    } // End if 
    }); 
}); 

Der Schlüssel nehmen hier weg ist diese Linie:

scrollTop: $(hash).offset().top -200 

Sie können addieren oder subtrahieren eine beliebige Anzahl von Pixeln, die Sie auswählen.

Edit:

Eigentlich diesen Code versuchen Sie stattdessen:

$(document).ready(function() { 

$("#xp-navigation").find("a[href*=#]:not([href=#])").click(function() { 
     var offset = 0; 
     var speed = 1000; 
     var target = $(this.hash); 

     $("html,body").animate({ 
      scrollTop: target.offset().top - offset 
     }, speed); 
    }); 

}); 

Es ist etwas sauberer und Sie können auch den Offset einzustellen.