kurze jQ/JS-Frage

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

kurze jQ/JS-Frage

Post by frase » Mon Jun 10, 2019 2:36 pm

Hi,
ich habe in einem Template Holgers Scroll-Script:

Code: Select all

// smooth scroll to anchor
$('a[href^="#"]').on('click', function(e){
	var href = $(this).attr('href');
	$('html, body').animate({
		scrollTop: $(href).offset().top - 120}, 600);
		e.preventDefault();
});
/*** Ergänzung ***/
$('a[href^="#"].start').on('click', function(e){
	var href = $(this).attr('href');
	$('html, body').animate({
		scrollTop: $(href).offset().top - 0}, 600);
		e.preventDefault();
});
Wie man sieht, habe ich aus Unwissenheit eine Ergänzung hinzugefügt, damit bei einem Link mit der Klasse "start" kein Offset verwendet wird.
Das funktioniert zwar (scrollt erst bis zum Offset und dann das restliche Stück weiter), ist aber mit Sicherheit nur eine laienhafte Lösung.
Kann mir mal jemand auf den Hinterkopf klopfen?

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: kurze jQ/JS-Frage

Post by Holger » Mon Jun 10, 2019 3:19 pm

Gegenfrage: stimmt der Selektor wirklich?

Code: Select all

$('a[href^="#"].start')
Also ein Link mit einem Hash im href und der Klasse "start"?
Oder einfach nur ein Link mit der Klasse "start"?
Oder einfach der erste Link in einer Liste?

Für alle Links der Klasse Start, unabhängig vom href, wäre dann richtig:

Code: Select all

$('a[href^="#"]', 'a.start')
Generell kannst du mittels hasClass() prüfen, ob die Klasse vorhanden ist und dann den Offset entsprechend setzen. In etwa so:

Code: Select all

var offset = $(this).hasClass('start') ? 0 : 120;
...
...
...    scrollTop: $(href).offset().top - offset}, 600);

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: kurze jQ/JS-Frage

Post by frase » Mon Jun 10, 2019 3:39 pm

Holger wrote:
Mon Jun 10, 2019 3:19 pm
Generell kannst du mittels hasClass() prüfen, ob die Klasse vorhanden ist und dann den Offset entsprechend setzen. In etwa so:
Standing ovations!
Wusste ich's doch. Manchmal traue ich mich gar nicht, solche dummen Fragen zu stellen ...
Aber, hier wird geholfen :!:
Und ja, der Selector stimmt: Link mit einem Hash im href und der Klasse "start" (soll zum Start scrollen ;-) )
Mein Code sieht nun so aus:

Code: Select all

// smooth scroll to anchor
var firstOffset = $('a[href^="#"]').hasClass('start') ? 0 : 120;
$('a[href^="#"]').on('click', function(e){
	var href = $(this).attr('href');
	$('html, body').animate({
		scrollTop: $(href).offset().top - firstOffset}, 600);
		e.preventDefault();
});
Thanks a lot, sir!

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: kurze jQ/JS-Frage

Post by frase » Mon Jun 10, 2019 4:33 pm

Irgendwie habe ich ich mich da verguckt :oops:
Mein oben angeführter Code funktioniert nicht richtig.
Der Link mit der Klasse "start" führt das Scrolling mit Offset 0 aus.
Aber alle anderen auch ???
Aber AHA!
Man muss nur richtig lesen, was Herr H.I. schrieb!

Code: Select all

// smooth scroll to anchor
$('a[href^="#"]').on('click', function(e){
	var firstOffset = $(this).hasClass('start') ? 0 : 120;
	var href = $(this).attr('href');
	$('html, body').animate({
		scrollTop: $(href).offset().top - firstOffset}, 600);
		e.preventDefault();
});
So klappt's auch mit dem Scrolling :D

Post Reply