Ankündigung

Einklappen
Keine Ankündigung bisher.

JS für bottom up Funktion

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • JS für bottom up Funktion

    Hallo zusammen,
    mit dem folgenden JS wird die Funktion eines Button gesteuert, der nach 100px erscheint und beim Anklicken die Webseite wieder nach oben, in diesem Fall 600px unter den oberen Rand des Bildschirms scrollt. Ich möchte das bei kleinen Bildschirmen für Smartphones (max 800px width) aber bis zum oberen Rand des Bildschirms haben. Irgendwie müsst das mit eine if/else-Funktion gelingen. Leider habe ich keinen Plan, wie das gehen soll. Kann mir jemand einen Tipp geben?
    <!-- Back to top Button -->
    <script>
    $(document).ready(function(){
    // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden
    var back_to_top_button = ['<a href="#top" class="back-to-top"><span><i class="fas fa-chevron-up"></i></span></a>'].join("");
    $("body").append(back_to_top_button)
    // Der Button wird ausgeblendet
    $(".back-to-top").hide();
    // Funktion für das Scroll-Verhalten
    $(function () {
    $(window).scroll(function () {
    if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
    $('.back-to-top').fadeIn();
    } else {
    $('.back-to-top').fadeOut();
    }
    });
    $('.back-to-top').click(function () { // Klick auf den Button 600px vom oberen Rand
    $('body,html').animate({
    scrollTop: 600
    }, 800);
    return false;
    });
    });
    });
    </script>
    <!-- Ende Back to top Button -->

  • #2
    Das ist kein Problem. Hier:
    https://stackoverflow.com/questions/...s-using-jquery
    kannst Du nachlesen, wie Du die Breite des Anzeigefensters ermitteln kannst.
    Und dann abhängig davon die Position fest legen, zu der gescrollt werden soll:
    Code:
            $(document).ready(function () {
                // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden
                // const back_to_top_button = '<a href="#top" class="back-to-top"><span><i class="fas fa-chevron-up"></i></span></a>';
                const back_to_top_button = '<a href="#top" class="back-to-top"><span>To Top</span></a>';
                $("body").append(back_to_top_button)
                // Der Button wird ausgeblendet
                $(".back-to-top").hide();
                // Position, bis zu der aufwärts gescrollt werden soll, fest legen:
                let topPos = 0;
                if ($(window).width() > 800) {
                    topPos = 600;
                }
                // Funktion für das Scroll-Verhalten
                // $(function () {
                $(window).scroll(function () {
                    if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
                        $('.back-to-top').fadeIn();
                    } else {
                        $('.back-to-top').fadeOut();
                    }
                });
                // Bei Klick auf den Button: Scrollen zu der Position,
                // die wir zuvor fest gelegt haben:
                $('.back-to-top').click(function () {
                    $('body,html').animate({
                        scrollTop: topPos
                    }, 800);
                    return false;
                });
                // });
            });
    (Den zweiten Button mit dem "To Top" habe ich nur für meinen Test verwendet.)
    BTW:
    • Dieses: "$(function () {" ist ein Shortcut für ein document-ready und es macht keinen Sinn, das zu verschachteln. Man kann von Glück sagen, wenn das innere überhaupt triggert.
    • Ebenso macht es keinen Sinn, ein Array mit nur einem Element zu definieren und dann mit join zu verbinden.
    Zuletzt geändert von Sempervivum; 30.07.2022, 06:49.
    Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
    (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

    Kommentar


    • #3
      Danke Dir, Sempervivum. Leider erscheint jetzt der Uptotop-Button gar nicht mehr. Wenn du das mal life anschauen willst, hier kommt der Link => https://www.reha-sportstudio.de

      Kommentar


      • #4
        Hm, bei mir kommt der Button einwandfrei, wenn ich ein wenig nach unten scrolle. Allerdings kann ich im Javascript die Änderung, die ich vorgeschlagen hatte, nicht wiederfinden.
        Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
        (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

        Kommentar


        • #5
          Sorry, ich habe Dir die falsche Url geschickt. Bitte schau hier => https://www.erich-wolf.de/reha

          Kommentar


          • #6
            In der Console sieht man ein "unexpected end of input", das tritt normaler Weise auf, wenn eine schließende Klammer fehlt. Aktiviere das auskommentierte, schließende Klammernpaar ganz am Ende des Javascript für den Button, dann sollte es funktionieren.
            Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
            (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

            Kommentar


            • #7
              Ich steh auf dem Schlauch. welche Zeile meinst du?

              Kommentar


              • #8
                Zeile 421, die vorletzte Zeile vor dem schließenden </script>:
                Code:
                     <script>
                      $(document).ready(function () {
                    // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden
                    //const back_to_top_button = '<a href="#top" class="back-to-top"><span><i class="fas fa-chevron-up"></i></span></a>';
                    const back_to_top_button = '<a href="#top" class="back-to-top"><span>To Top</span></a>';
                    $("body").append(back_to_top_button)
                    // Der Button wird ausgeblendet
                    $(".back-to-top").hide();
                    // Position, bis zu der aufwärts gescrollt werden soll, fest legen:
                    let topPos = 0;
                    if ($(window).width() > 800) {
                        topPos = 600;
                    }
                    // Funktion für das Scroll-Verhalten
                    // $(function () {
                    $(window).scroll(function () {
                        if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
                            $('.back-to-top').fadeIn();
                        } else {
                            $('.back-to-top').fadeOut();
                        }
                    });
                    // Bei Klick auf den Button: Scrollen zu der Position,
                    // die wir zuvor fest gelegt haben:
                    $('.back-to-top').click(function () {
                        $('body,html').animate({
                            scrollTop: topPos
                        }, 800);
                        return false;
                    });
                    // });
                     </script>
                Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                Kommentar


                • #9
                  Das haut nicht hin. Es taucht ein Fehler in Zeile 392 auf.
                  Angehängte Dateien

                  Kommentar


                  • #10
                    In Zeile 17 ist das Einbinden von jQuery auskommentiert.
                    Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                    (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                    Kommentar


                    • #11
                      Oh Gott!!!! Vielen Dank, jetzt funktioniert es.

                      Kommentar

                      homepage-forum.de - Hilfe für Webmaster! Statistiken

                      Einklappen

                      Themen: 57.100   Beiträge: 431.723   Mitglieder: 29.340   Aktive Mitglieder: 41
                      Willkommen an unser neuestes Mitglied, Leonardsog.

                      Online-Benutzer

                      Einklappen

                      293 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 288.

                      Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                      Die neuesten Themen

                      Einklappen

                      • bodan
                        wie geht ihr mit dem Google-Fonts-Thema um?
                        Moin,

                        in diesem Thread geht es um ein sehr aktuelles Thema.

                        Google Fonts - und die derzeit in der Presse immer wieder berichteten Schwierigkeiten in Verbindung mit der DSGVO.

                        Aber - sind wir doch mal Ehrlich; im Grunde ist das nicht nur ein Problem bloss mit Google...
                        Heute, 00:35
                      • daniel5959
                        Heizung - Geld sparen und frieren oder warme Wohnung?
                        Hallo,

                        mit der kälteren Jahreszeit wird das Thema Heizen wieder aktuell und die Frage: Geldsparen oder warme Wohnung?

                        Ich habe ja einen kleinen Ölofen (Einzelofen), der über eine Ölleitung mit der Druckspeicher-Ölpumpe und dem Öltank im Keller verbunden ist. Der Ölofen...
                        21.09.2022, 02:39
                      • Lupus_III
                        Vereins-Newsletter per E-Mail sicher versenden.
                        Ich suche für meinen Verein eine Möglichkeit in regelmäßigen Abständen Newsletter per E-Mail an etwa 500 Mitglieder zu versenden. Wer kennt aus seiner Praxis eine Möglichkeit, ein Tool, um dies zu realisieren. Ich möchte hier Bestpraxis anwenden.
                        Vielen Dank schon mal.
                        19.09.2022, 11:32
                      • Jojo95
                        Wordpress vs. Wix Erfahrungen
                        Hallo zusammen,

                        bin kein komplett Anfänger und war jahrelang bei One.com mit dem Divi-Theme für Wordpress. Jetzt ist leider seit längerem meine Website (ich vermute durch Plugins von Drittanbietern) komplett abgeschmiert und ich bekomme den „White Screen of Death“ nicht behoben....
                        18.09.2022, 12:53
                      • Frank-tene
                        Frank Steinmetz
                        Hallo liebe Mitglieder,

                        ich habe einen Webshop für Schmuck. Meine eigene Kollektion. Es ist Schmuck für die BDSM Szene. Aber kein Intimschmuck oder Ähnliches.
                        Einfach nur Fingerringe, Ohrschmuck und Anhänger.
                        Ich habe auch nur Produktbilder eingestellt.
                        Es gibt keine...
                        17.09.2022, 16:58

                      Die neuesten Beiträge

                      Einklappen

                      • Lupus_III
                        Vereins-Newsletter per E-Mail sicher versenden.
                        Ich suche für meinen Verein eine Möglichkeit in regelmäßigen Abständen Newsletter per E-Mail an etwa 500 Mitglieder zu versenden. Wer kennt aus seiner Praxis eine Möglichkeit, ein Tool, um dies zu realisieren. Ich möchte hier Bestpraxis anwenden.
                        Vielen Dank schon mal.
                        19.09.2022, 11:32
                      • Lupus_III
                        Antwort auf Vereins-Newsletter per E-Mail sicher versenden.
                        Also die Methode mit Mail Merge - Thunderbird habe ich erfolgreich getestet. Das hat sehr gut funktioniert. Danke....
                        Heute, 13:35
                      • bodan
                        wie geht ihr mit dem Google-Fonts-Thema um?
                        Moin,

                        in diesem Thread geht es um ein sehr aktuelles Thema.

                        Google Fonts - und die derzeit in der Presse immer wieder berichteten Schwierigkeiten in Verbindung mit der DSGVO.

                        Aber - sind wir doch mal Ehrlich; im Grunde ist das nicht nur ein Problem bloss mit Google...
                        Heute, 00:35
                      • bodan
                        Antwort auf wie geht ihr mit dem Google-Fonts-Thema um?
                        guten Morgen Daniel

                        vielen Dank für die Rückmeldung und deine Erläuterungen. Das ist sehr hilfreich.
                        Danke auch für den Link

                        Also - die Sache mit den Google-Fonts die ist so dass sie praktisch für alle (!!) Seitenbesucher gilt - also sobald ein Besucher die Seite...
                        Heute, 08:49
                      • daniel5959
                        Antwort auf wie geht ihr mit dem Google-Fonts-Thema um?
                        Hallo,

                        die Sache ist im Grunde einfach:

                        1) Die Google Fonts lassen sich ja offline einbinden, also herunterladen und auf den eigenen Webspace hochladen und von dort auf der Webseite einbinden. Oder man verwendet websichere Schriften.

                        2) Für Google Maps gibt es...
                        Heute, 01:04
                      • daniel5959
                        Heizung - Geld sparen und frieren oder warme Wohnung?
                        Hallo,

                        mit der kälteren Jahreszeit wird das Thema Heizen wieder aktuell und die Frage: Geldsparen oder warme Wohnung?

                        Ich habe ja einen kleinen Ölofen (Einzelofen), der über eine Ölleitung mit der Druckspeicher-Ölpumpe und dem Öltank im Keller verbunden ist. Der Ölofen...
                        21.09.2022, 02:39
                      • daniel5959
                        Antwort auf Heizung - Geld sparen und frieren oder warme Wohnung?
                        Hallo,

                        bin nicht eitel, wenn es wärmt, dann ziehe ich auch eine Mütze auf, wenn ich aus dem Haus gehe, denn ich will keine Ohrenentzündung oder keine Erkältung riskieren. Andere sehe ich manchmal bei kühlem Wetter draußen im Hemd herumlaufen, während ich eine dicke Jacke anhabe....
                        Gestern, 22:03
                      • bdt600
                        Antwort auf Heizung - Geld sparen und frieren oder warme Wohnung?
                        ...
                        Gestern, 08:52
                      • Testie
                        Antwort auf Heizung - Geld sparen und frieren oder warme Wohnung?
                        Also für mich und bestimmt auch vielen anderen, sind 19,5 Grad im Winter nicht warm. Wenn ich 40h die Woche arbeiten gehe muss ich jetzt jeden Euro umdrehen damit ich über dem Winter komme? Alles wegen unseren tollen Politiker die schleunigst die Energiewende in Deutschland durchsetzten wollen auf...
                        Gestern, 07:45
                      • daniel5959
                        Antwort auf Heizung - Geld sparen und frieren oder warme Wohnung?
                        Nachtrag:

                        Rechnung mit 4.500 Liter Heizöl (z.B. Haus mit 2 Wohnungen plus Einliegerwohnung), das mach bei aktuell bei meiner PLZ und Heizöl24.de 7.715,48 Euro. Bei 2°C weniger und rund 12% Ersparnis wären das gerundet 926 Euro im Jahr oder rund 150 Euro pro Monat im Winterhalbjahr....
                        Gestern, 06:02
                      Lädt...
                      X