Smooth Scroll einfügen?

**Michi1998** · 10.01.2018, 12:04

Huhu

ich habe eine Website mit Contao erstellt und auf einer Seite einige Ankerpunkte gesetzt. Nun ist es so dass beim anklicken des jeweiligen Links zum richtigen Ankerpunkt gesprungen wird. Allerdings möchte ich dort den Smooth Scroll effekt einbinden damit dies schöner aussieht?
Wie und wo kann ich dort einen (JQuerie?) Code eingeben?

**Stefko** · 10.01.2018, 12:25

Zitat von Michi1998

Wie und wo kann ich dort einen (JQuerie?) Code eingeben?

Eine Möglichkeit wäre den Schnipsel im Seitenlayout unter "Eigener JavaScript-Code" einzutragen.

**Michi1998** · 10.01.2018, 12:30

Wie sieht dieser Code denn aus? Ich kenn mich mit JQuery leider gar nicht aus und hab so viel verschiedene im Internet gefunden und keiner klappt...

**Michi1998** · 10.01.2018, 12:55

Ich habe jetzt diesen Code eingefügt:

<script>
$('a[href^=#]').on('click', function(e){
var href = $(this).attr('href');
$('html, body').animate({
scrollTop:$(href).offset().top
},'slow');
e.preventDefault();
});
</script>

Allerdings spring ich dann immer noch zu dem jeweiligen Anker hin. Wenn ich die Seite dann neu lade wird bis zu dem jeweiligen Ankerpunkt gescrollt.

Wie krieg ich das jetzt so hin, dass auch beim Anklicken von dem Link zu dem Ankerpunkt gescrollt wird und nicht nur beim neu laden?

**Stefko** · 10.01.2018, 14:21

Es gibt auch noch eine Erweiterung [jquery-smooth-scroll], dann kannst Du Dir den eigenen JS-Code sparen. Es muss lediglich "j_smoothscroll" im Seitenlayout unter "jQuery laden" aktiviert sein.

**matuweb** · 31.01.2018, 09:12

Gibt es da auch etwas für Contao 4.4?
Ich arbeite gerade an einer Onepage und würde gerne die internen Links mit smooth scroll ansteuern...

**Hoch-3** · 07.04.2019, 18:15

Darf ich kurz nachfragen, weit es hier eine einfache Lösung?

**Bennie** · 08.04.2019, 10:13

mit jQuery z.B.

Code:

<script>
$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();
	    var target = this.hash,
	    $target = $(target);
	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
</script>

entsprechend dem Link einen Anker Deiner Wahl anhängen , z.B. #mysection
und am Ziel Element die id mysection vergeben - läuft

Das ist in 5 Minuten umgesetzt - ich setze jetzt voraus, dass die unterschiedl. Methoden des JS Einbindens im Layout bekannt sind.

**Hoch-3** · 08.04.2019, 11:33

Zitat von Bennie

mit jQuery z.B.

Code:

<script>
$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();
	    var target = this.hash,
	    $target = $(target);
	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
</script>

entsprechend dem Link einen Anker Deiner Wahl anhängen , z.B. #mysection
und am Ziel Element die id mysection vergeben - läuft

Das ist in 5 Minuten umgesetzt - ich setze jetzt voraus, dass die unterschiedl. Methoden des JS Einbindens im Layout bekannt sind.

Danke herzlich. JS ist leider nicht meine Stärke. Ich denke aber, dass ich das rausfinden werde... ausser du magst mir grad ein Beispiel schicken. :-)

Also ich hab den Code in den Header eingefügt. jQuery ist aktiv. Link und Ziel sind definiert. Aber es springt nach wie vor, anstatt dass es runderscrollt. Was hab ich vergessen oder falsch gemacht?

**Bennie** · 08.04.2019, 11:52

Das heißt Du hast den Code im Seitenlayout im Bereich "Zusätzliche <head>-Tags" eingetragen?
Trag den Code mal in "Eigener JavaScript-Code" ein. Ändert sich dann etwas?
Ansonsten mal Link zur Seite falls möglich

**Hoch-3** · 08.04.2019, 12:01

Zitat von Bennie

Das heißt Du hast den Code im Seitenlayout im Bereich "Zusätzliche <head>-Tags" eingetragen?
Trag den Code mal in "Eigener JavaScript-Code" ein. Ändert sich dann etwas?
Ansonsten mal Link zur Seite falls möglich

Ich hatte es im head, habs auch im eigener JavaScript Code versucht. Nix.

Ist halt noch nicht fertig. http://adrienneschlick.ch/home.html

Es gibt im benutzten Template Litenote eine ScrollTop-Funktion (ab Zeile 505 im Quellcode). Kann es sein, dass die sich nicht vertragen?

**Bennie** · 08.04.2019, 12:19

jQuery ist zweimal eingebunden bei Dir, das kommt vermutlich von dem gelieferten Template. Vielleicht schaltest Du mal jQuery im Layout probehalber aus.
Was passiert dann?

**Hoch-3** · 08.04.2019, 12:25

Zitat von Bennie

jQuery ist zweimal eingebunden bei Dir, das kommt vermutlich von dem gelieferten Template. Vielleicht schaltest Du mal jQuery im Layout probehalber aus.
Was passiert dann?

Leider keine Veränderung.

**Bennie** · 08.04.2019, 12:46

Da weiß ich momentan auch nicht weiter, aber dort solltest Du mal suchen.
Das Scrolltotop funktioniert ja auch und sollte eigentlich nicht stören, hab ich in etlichen Installationen auch so drin.

Wie sind die anderen JS Script eingebunden, direkt in der fe_page.html5 ?

**Hoch-3** · 08.04.2019, 12:54

Zitat von Bennie

Da weiß ich momentan auch nicht weiter, aber dort solltest Du mal suchen.
Das Scrolltotop funktioniert ja auch und sollte eigentlich nicht stören, hab ich in etlichen Installationen auch so drin.

Wie sind die anderen JS Script eingebunden, direkt in der fe_page.html5 ?

Im Seitenlayout als externe JS.

Ich frag sonst mal die Programmierer vom litenote.

Herzlichen Dank für deine Zeit.

**Hoch-3** · 11.04.2019, 08:25

So hab ichs gelöst. (Gefunden in einem Joomla-Forum)

dem Ankerlink geb ich die class="scroll"

Und dann dieser Code als eigener JavaScript-Code im Seitenlayout.

Code:

<script>
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){
		event.preventDefault();
		$('html,body').animate({scrollTop:$(this.hash).offset().top-60}, 900);
		});
	});
</script>

**Hoch-3** · 30.01.2020, 12:56

Zitat von Hoch-3

So hab ichs gelöst. (Gefunden in einem Joomla-Forum)

dem Ankerlink geb ich die class="scroll"

Und dann dieser Code als eigener JavaScript-Code im Seitenlayout.

Code:

<script>
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){
		event.preventDefault();
		$('html,body').animate({scrollTop:$(this.hash).offset().top-60}, 900);
		});
	});
</script>

Nachtrag: Scheint nur zu funktionieren, wenn keine anderen internen Links (wie eine Navigation) auf der Site vorhanden ist. Also, die Navi funktioniert dann nicht mehr.

Frage als JS-Laie. Kann man eine Abfrage machen, sowas wie, wenn a mit .scroll dann so und sonst nicht?

Hiermit hingegen funktionierts... :-)

HTML-Code:

<script src="http://www.google.com/jsapi"></script>
<script>
/* <![CDATA[ */
 
  google.load("jquery", "1.3.2");
/* ]]> */
</script>
<script>
/* <![CDATA[ */                                            
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var verweisziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(verweisziel).offset().top
}, 800 , function (){location.hash = verweisziel;});
});
return false;
}); /* ]]> */
</script>

**folkfreund** · 30.01.2020, 16:46

Ich würde dir aber empfehlen, die interne Version von JQuery zu verwenden, die du vermutlich auch noch für andere Sachen auf deiner Seite nutzt. Außerdem muss ja nicht Google von jedem Seitenaufruf erfahren ;-)

Code siehe hier:
https://community.contao.org/de/show...l=1#post344966