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.111   Beiträge: 432.331   Mitglieder: 29.315   Aktive Mitglieder: 42
                      Willkommen an unser neuestes Mitglied, Olaf Berg Nielsen.

                      Online-Benutzer

                      Einklappen

                      187 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 187.

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

                      Die neuesten Themen

                      Einklappen

                      Die neuesten Beiträge

                      Einklappen

                      Lädt...
                      X