Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Top-Link Button wird immer im Body eingebunden

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard 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

  2. #2
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    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.
    Geändert von Bennie (24.06.2021 um 14:00 Uhr)

  3. #3
    Contao-Nutzer Avatar von hjo
    Registriert seit
    08.01.2013.
    Ort
    Wuppertal
    Beiträge
    118

    Standard

    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

  4. #4
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    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

  5. #5
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    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({
                    
    scrollTop0
                
    }, 800);
                return 
    false;
            });
        });

    }); 
    das sollte klappen
    Geändert von Bennie (24.06.2021 um 16:37 Uhr)

  6. #6
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    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

  7. #7
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    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.
    Geändert von Bennie (24.06.2021 um 16:51 Uhr)

  8. #8
    Contao-Fan
    Registriert seit
    09.02.2011.
    Beiträge
    600

    Standard

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •