jQuery Scroll statt MooTools smoothScroll

Liebe Community

Da ich nicht gerne MooTools und jQuery mische, habe ich die Scroll-Funktion neu in jQuery abgespeichert:

HTML-Code:

---

<script type="text/javascript">

var $ = jQuery.noConflict();
$('a[href^=#]').on('click', function(e){
    var href = $(this).attr('href');
    $('html, body').animate({
        scrollTop:$(href).offset().top
    },2000);
    e.preventDefault();
});

</script>

---

Funktioniert bei mir ... aber nur ohne aktiviertem Mootools nun auch mit aktiviertem Mootools.
Evt hat jemand anderes auch Interesse daran........
Liebe Grüsse
Eva

Moinsen,


super Sache.
Eventuell könntest du das $ noch durch jQuery ersetzen, dann sollte es auch mit aktiviertem MooTools funken.

Hallo MacGyer

Danke für Deinen Input, hat leider nicht funktioniert. Ich habe aber dank Deinem Tipp im Internet die Lösung gefunden:

HTML-Code:

---

var $ = jQuery.noConflict();

---

Ich habe den Code oben geändert und es funktioniert.
Liebe Grüsse Eva

Du kannst auch einfach eine Immediately Invoked Function Expression (IIFE) verwenden. Dieses Muster kann ich persönlich generell bei jedem Javascript Code empfehlen da es die Nutzung globaler Variablen einschränkt.

Nachfolgend ein Beispiel mit deinem Code.

HTML-Code:

---

<script type="text/javascript">

!(function($) {

"use strict";

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

})(jQuery)


</script>

---

Zitat:

---

Zitat von Eva

Liebe Community

Da ich nicht gerne MooTools und jQuery mische, habe ich die Scroll-Funktion neu in jQuery abgespeichert:

HTML-Code:

---

<script type="text/javascript">

jQuery('a[href^=#]').on('click', function(e){
    var href = jQuery(this).attr('href');
    jQuery('html, body').animate({
        scrollTop:jQuery(href).offset().top
    },2000);
    e.preventDefault();
});

</script>

---

Funktioniert bei mir ... aber nur ohne aktiviertem Mootools nun auch mit aktiviertem Mootools.
Evt hat jemand anderes auch Interesse daran........
Liebe Grüsse
Eva

---

:) So war es gemeint mit dem Austauschen von $ auf namespace jQuery

Hallo,

ich habe das oben genannte Skript im Templates-Ordner mit dem Namen j_smoothScroll.html5 Anhang 15354 abgelegt und im Seitenlayout eingebunden. Das Skript funktioniert auch, scrollt aber immer bis nach oben, ein Teil der Seite verschwindet unter dem Header.

Im Moo_Tools-Script wird ja hier beschrieben, wie man die Höhe der Kopfzeile mit einberechnet.

Was muss bei oben genannten jQuery Script eingefügt werden, damit die Höhe der Kopfzeile mit berücksichtigt wird?

Ich beherrsche kein Javascript bzw. jQuery, deshalb benötige ich eine fertige Anleitung.

Danke für Eure Hilfe.

Schmidty

Link zur Seite?

Hallo Spooky,
die Seite ist eine reine Testseite und nicht online verfügbar. Ein bestimmtes Projekt ist (noch) nicht geplant. Ich mache gerade meine ersten Versuche mit OnePageWebsite. Die Testseite läuft Lokal unter xampp. Mit Moo-Tools läuft die Seite wie sie soll, mich interessiert jetzt die jQuery-Anpassung. Der Header ist 300 Pixel hoch.

Gruß Schmidty

Hey Schmidty,
probier mal hinter dem offset().top einen minuswert einzufügen. z.B so wie hier unten

HTML-Code:

---

<script type="text/javascript">

jQuery('a[href^=#]').on('click', function(e){
    var href = jQuery(this).attr('href');
    jQuery('html, body').animate({
        scrollTop:jQuery(href).offset().top -300
    },2000);
    e.preventDefault();
});

</script>

---

Gruss Gassi

Bei mir läuft dieses Script seltsamerweise überhaupt nicht.
Ich hatte mit der mootools-Variante kein Problem, wollte aber alles auf jquery umstellen.
Das j_smoothscroll template ist eingebunden, jquery angehakt, aber es tut sich leider gar nichts. Muss man dazu noch zusätzlich ein bestimmtes Template der OPW Erweiterung aktivieren?

Was sagt denn die Devolopertoolbar deines Browsers?

Zitat:

---

Zitat von Bennie

Bei mir läuft dieses Script seltsamerweise überhaupt nicht.
Ich hatte mit der mootools-Variante kein Problem, wollte aber alles auf jquery umstellen.
Das j_smoothscroll template ist eingebunden, jquery angehakt, aber es tut sich leider gar nichts. Muss man dazu noch zusätzlich ein bestimmtes Template der OPW Erweiterung aktivieren?

---

Link zur Seite?

Ist leider alles noch lokal. Der hier gepostete Code läuft aber bei euch und benötigt kein weiteres jQuery Plugin, oder?

Hallo,

zunächst einmal Entschuldigung für die späte Rückmeldung. Es ging einfach nicht früher...

Das Script funktioniert bei mir mit der Anpassung so wie von mir gewünscht.

Danke für die Hilfe.

Viele Grüße Schmidty