Klicken Sie auf den Ankerlink in JS, um reibungslos zu scrollen und die obere Position frei anzupassen

Klicken Sie auf den Ankerlink in JS, um reibungslos zu scrollen und die obere Position frei anzupassen

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

Bildbeschreibung hier einfügen

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:
  • Vue.js-Praxis: Implementieren dynamischer Ankerpunkte durch Abhören von Scroll-Ereignissen
  • JS implementiert die Methode, die Maus auf den Link zu setzen, um Lauftext anzuzeigen
  • Link horizontalen Text nach oben und unten Lücke Schleife Scroll JS-Effekt
  • Linkbild nahtlos (ohne Unterbrechung) reibungsloses Scrollen nach links Js-Versionscode

<<:  Detaillierte Erläuterung von acht Möglichkeiten zur Optimierung der MySQL-Datenbank (klassische Pflichtlektüre)

>>:  Tutorial zum Konfigurieren und Verwenden des i3-Fenstermanagers unter Linux

Artikel empfehlen

Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten

Inhaltsverzeichnis Benutzerdefinierte Vite-Plugin...

Docker-Image-Analysetool - Analyse des Tauchprinzips

Heute empfehle ich ein solches Open-Source-Tool z...

Schiebemenü mit CSS3 implementiert

Ergebnis:Implementierungscode: <!DOCTYPE html&...

Kreativer Eröffnungseffekt durch die Kombination von CSS 3.0 mit Video

Ich möchte Ihnen einen kreativen Einstieg vorstel...

Docker-Installation Nginx Tutorial Implementierung Abbildung

Lassen Sie uns Nginx installieren und ausprobiere...

Womit kann ich dich, meinen Tisch, retten (Haiyu-Blog)

Tabellen spielten einst eine sehr wichtige Rolle ...

Detaillierte Erläuterung des MySQL-Mechanismus zur gemeinsamen Abfrageoptimierung

Inhaltsverzeichnis Strategie zur Ausführung föder...

8 Gründe, warum Sie die Xfce-Desktopumgebung für Linux verwenden sollten

Aus verschiedenen Gründen (einschließlich Neugier...

Nginx definiert die Zugriffsmethode für Domänennamen

Ich erstelle derzeit Nginx, kann aber nicht über ...

Implementierungscode für die HTML-Drag & Drop-Funktion

Basierend auf Vue Die Kernidee dieser Funktion be...

Lösen Sie das Problem der Verwendung des Swiper-Plugins in Vue

Da ich dieses Plugin beim Schreiben einer Demo ve...