Klicken Sie auf den Ankerlink, um reibungslos zu scrollen und sich frei an die oberste Position anzupassen 1. Fügen Sie Ankerpunkte hinzu. Beachten Sie, dass das a-Tag nacTo statt href verwendet. <ul> <li><a class="anchor" navTo="one">Zielauswahl</a></li> <li><a class="anchor" navTo="two">Zielkunden</a></li> <li><a class="anchor" navTo="three">Werbeformat</a></li> <li><a class="anchor" navTo="four">Werbung</a></li> <li><a class="anchor" navTo="five">Budget und Zeitplan</a></li> <li><a class="anchor" navTo="six">Konvertierungsverfolgung</a></li> </ul> 2. Fügen Sie dem Inhalt, der nach rechts gescrollt werden muss, die entsprechende ID hinzu <div Klasse="rechts"> <div id="eins"> <div Klasse="Ziel"> <i>Ihr Ziel ist:</i> <div class="brand_engagement"><img src="img/signal.png" /><i>Markenengagement</i><b>Veränderung</b></div> <p>Ich möchte, dass die Leute von meinem Unternehmen erfahren. </p> <div Klasse="Werbung_das"> <img src="img/right.png" /> Ihre Anzeige wird den richtigen Personen angezeigt, die Ihre Anzeige am wahrscheinlichsten sehen. </b> </div> </div> </div> <div id="zwei"> Der zweite Teil des Inhalts </div> <div id="drei"> Der dritte Teil des Inhalts </div> <div id="vier"> Der vierte Teil des Inhalts </div> <div id="fünf"> Der fünfte Teil des Inhalts </div> </div> 3. Fügen Sie js hinzu, um reibungslos bis zur oberen Distanz zu scrollen (150 ist die Höhe der Navigation, die nach Bedarf frei angepasst werden kann). $('.anchor').klick(Funktion () { var navto = $(this).attr('navto'); wenn (navto != "#") { var $div = $('#' + navto); var top = $div.offset().top || 0; $('html,body').animieren({ 'scroll-top': nach oben - 150 }, 500); } anders { $('html,body').animieren({ 'nach oben scrollen': 0 }, 500); } }); OK~ Effektanzeige Dies ist das Ende dieses Artikels über reibungsloses Scrollen beim Klicken auf Ankerlinks in JS und freies Anpassen an die oberste Position. Weitere relevante Inhalte zum reibungslosen Scrollen von JS-Ankerlinks finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
>>: Tutorial zum Konfigurieren und Verwenden des i3-Fenstermanagers unter Linux
Inhaltsverzeichnis Problembeschreibung Was ist di...
Inhaltsverzeichnis Vorwort Typinferenz Einengung ...
Inhaltsverzeichnis 1. Übersicht 2. Parameter zum ...
0. Einleitung 18. August 2016 Heute ist mir aufge...
Suchen Sie das Installationsverzeichnis von Virtu...
1 Überprüfen Sie die Linux-Distributionsversion [...
Wählen Sie bei der Installation der CentOS7-Versi...
var() Einführung und Verwendung Details (MDN) IE ...
1. Geben Sie „Start“ in die Menüleiste ein und kl...
Einige allgemeine Anweisungen zum Anzeigen von Tr...
1. Überprüfen Sie, ob das Modul „Status prüfen“ i...
Die Anzeige von Daten ist seit jeher eine Forderu...
Hier präsentiert 123WORDPRESS.COM den ersten Teil...
In diesem Artikel werden hauptsächlich die Unters...
Inhaltsverzeichnis Vorwort 1. Optimistisches Sper...