Top-Link Button wird immer im Body eingebunden

Hallo zusammen,

ich habe ein JavaScript auf unseren Webseiten eingebunden mit dem ein Top-Link Button generiert wird, über den man zum Seitenanfang scrollen kann. Das Ganze funktioniert auch soweit sehr gut bis auf einen Punkt bei dem ich nicht weiß wie ich das Problem lösen kann.
Dieses Script bindet den Button immer im Body ein und somit überragt der Button die eigentliche Webseite, wenn bei gewissen Auflösungen der Seiten ein Seitenrand sichtbar ist. Meine Vorstellung ist, dass der Button nicht über den Wrapper hinaus positioniert werden kann.
Ich hatte versucht im Script „body,html“ gegen „wrapper“ zu ersetzen leider ohne Erfolg, denn das Script wird trotzdem im Body eingebunden. Hier der verwendete Code:

JavaScript Code

Code:

---

$(document).ready(function(){

        var back_to_top_button = ['<a href="#top" class="back-to-top">Nach oben</a>'].join("");
        $("body").append(back_to_top_button)


        $(".back-to-top").hide();

        $(function () {
                $(window).scroll(function () {
                        if ($(this).scrollTop() > 100) {

                                $('.back-to-top').fadeIn();
                        } else {
                                $('.back-to-top').fadeOut();
                        }
                });

                $('.back-to-top').click(function () {

                        $('body,html').animate({
                                scrollTop: 0
                        }, 800);
                        return false;
                });
        });

});

---

CSS Code

Code:

---

.back-to-top {
background:red;
position:fixed;
bottom:20px;
right:20px;
padding:1em;
z-index:10;
border:3px solid #000;
}

---

Welche Möglichkeit habe ich damit der Button immer innerhalb vom Wrapper positioniert wird. Ist dies mit CSS oder einer anderen Methode zu realisieren. Die Webseite ist unter https://sub.musikverein-hirschzell.de/ zu finden.
Danke!


Gruß
Thomas

Zitat:

---

Ich hatte versucht im Script „body,html“ gegen „wrapper“ zu ersetzen leider ohne Erfolg, denn das Script wird trotzdem im Body eingebunden.

---

gegen #wrapper sollte doch gehen, ist doch die ID

Wobei position:fixed; für dein back to top Button natürlich dann keinen Sinn macht das nimmt das Element ja immer aus dem Fluss.

Hallo Thomas,

ich würde

Code:

---

$("body").append(back_to_top_button)

---

ändern auf

Code:

---

$("#wrapper").append(back_to_top_button)

---

append = anhängen

Dann müsste <a> unterhalb von #footer stehen.
Eventuell CSS modifizieren.

Gruss
Hans-Jürgen

Danke für die Info, aber leider war diese Änderung nur ein Teilerfolg.
Der Button ist jetzt zwar unter Wrapper im HTML eingefügt, doch auf die Positionierung in der Webseite hat dies keinen Einfluss. Der Button wird nach wie vor im Body positioniert, dafür ist denke ich der nachfolgende Code verantwortlich.

Code:

---

$('body,html').animate

---

Wenn ich dort "body,html" gegen "#wrapper" ersetze, dann wird über den Button nicht mehr zum Seitenanfang gescrollt. Zwar ist der Button dann noch sichtbar, aber die Scrollfunktion ist dadurch irgendwie abgeschaltet.
Kann man hier auch noch was durch eine Änderung bewirken?


Gruß
Thomas

Dann musst Du noch irgendwo einen anderen Fehler haben
Ich habe dasselbe Script eben ausprobiert - klappt einwandfrei

Ach Moment , da an der Stelle sollst Du ja auch nichts ändern

PHP-Code:

---

$(document).ready(function(){

    var back_to_top_button = ['<a href="#top" class="back-to-top">Nach oben</a>'].join("");
    $("#wrapper").append(back_to_top_button)


    $(".back-to-top").hide();

    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { 

                $('.back-to-top').fadeIn();
            } else {
                $('.back-to-top').fadeOut();
            }
        });

        $('.back-to-top').click(function () { 

            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

}); 


---

das sollte klappen

Prinzipiell klappt alles auch, nur wenn ich einen Style anwende dann greift der immer ausgehend vom Body.
Wenn ich z.B. einen größeren rechten Abstand einfüge wird der vom Body berechnet. Das ist eigentlich noch mein Problem.

Gruß
Thomas

Naja ich hatte doch schon geschrieben dass es mit position:fixed so nicht gehen kann.

Du willst doch dass der Button innerhalb Deines wrappers bleibt - dann darf er nicht fixed sein.

Aber Du kannst den Button doch auch einfach in den Footer bauen.

Wieso nimmst eigentlich nicht das Contao Element "Top-Link"
Kannst ja dann im Layout positionieren, wo Du willst, wobei ich einen Toplink immer position:fixed einbauen würde.

Ansonsten hilft Dir das: https://www.w3schools.com/css/css_positioning.asp