Zum Beispiel habe ich eine Schaltfläche in der Navarleiste mit dem Titel "Deutsch", und wenn der Benutzer auf "Deutsch" klickt, scrollt es auf eine h2 mit dem Titel "Traditionelle deutsche Lebensmittel". Das gleiche gilt, wenn ein Button in meiner Navbar namens "Französisch" hätte, würde die Seite des Benutzers dann weiter nach unten zu einem h2 mit dem Namen "Traditional French Foods" scrollen. Ich lerne Code jetzt seit ungefähr 4 Monaten, und ich kann nicht scheinen, das herauszufinden, jede Hilfe wird sehr geschätzt.Wie führe ich eine Navbar durch die Seite, wenn ich auf eine Schaltfläche klicke?

2017-09-09 Giandemir

Zeigen Sie uns einige Markup und was Sie versucht haben. Tipp: Verwenden Sie Ankerlinks und IDs. – Terry

In den alten Tagen, für die Anker-Tags und IDs entwickelt wurden. Sie können also javscript scroll verwenden, aber wenn es einfach ist, sagen Sie einfach, erstellen Sie ein Anchor-Tag. 'German' und dann sagen Sie auf einem Div später auf Ihrer Seite, die Sie haben. '

content

' – Keith

-1

Sie können einen Anker mit Ihrem a-Tag machen und dann wird es sofort nach unten scrollen, Sie können Javascript verwenden, um es zu verbessern.

<a href="index.php#german">German</a> 


<div id=#german></div>

Quelle

2017-09-09 22:27:48

Ihr Markup ist ein wenig verwirrt hier .. sollte 'href = # Deutsch' und Ihre' id = "Deutsch" '.. – Keith

Ein einfacher Weg, es wird mit # Hashes zu tun, setzen Sie eine ID in Ihrem h2 wie <h2 id="german">German</h2> und Ihre Links aus dem Header sollte wie folgt sein:

<a href="#german">Jump to German</a>

Weitere Informationen hier finden Sie: https://www.w3schools.com/html/html_links.asp

Quelle

2017-09-09 22:28:41 Sonicd300

<a href="#german">German</a> 

<h2 id="german">Traditional German Foods</h2>

Quelle

2017-09-09 22:32:51

Code-only Antworten werden abgeraten, weil sie nicht erklären, wie sie das Problem lösen in der Frage. Sie sollten Ihre Antwort aktualisieren, um zu erklären, was dieser Code tut und wie er verwendet wird. Bitte lesen Sie [Wie schreibe ich eine gute Antwort] (https://stackoverflow.com/help/how-to-answer) – FluffyKitten

Wie andere Antworten erwähnen, können Sie IDs und Anker-Tags verwenden. Aber das scrollt sofort. Um den Bildlauf einfach zu animieren, können Sie die Methode scrollIntoView verwenden.

Die Scroll Behavior specification eingeführt als eine Erweiterung der Window-Schnittstelle für den Entwickler zu ermöglichen, in zu nativem smooth scrolling zu entscheiden. Bisher wurde dies nur in Firefox implementiert.

Es gibt eine polyfill für andere Browser.

element.scrollIntoView ({Verhalten: 'smooth'})

document 
    .querySelector('YOUR_TRIGGER_HERE') 
    .addEventListener('click', event => { 
    document 
    .querySelector('YOUR_DESTINATION_HERE') 
    .scrollIntoView({behavior: 'smooth'}) 
    })

Quelle

2017-09-09 23:08:19

Wie führe ich eine Navbar durch die Seite, wenn ich auf eine Schaltfläche klicke?

Antwort

element.scrollIntoView ({Verhalten: 'smooth'})

Verwandte Themen