Wie erstelle ich einen Scroll Back To Top Button wenn keine Laufleiste vom Browser vorhanden ist

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Guten Morgen Marc, hast Du dies berücksichtigt?
Dieses Javascript ganz unten in das body-Tag stellen, vor das schließende </body> weil andernfalls die Elemente, auf die man sich bezieht, noch nicht existieren.
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
Hallo zusammen! Habe gestern und heute Morgen versucht. Den Scroll Back Button zu erstellen. Ich bekomme es nicht hin. Ich habe das Javascript vor dem </body> Tag geschrieben. Es gibt 2 Javascript Elemente, kann es sein, dass es deswegen nicht funktioniert? Hat irgendjemand eine Idee.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Sagt die Console etwas dazu? Ich hatte den Code getestet und er hat auf meiner Testseite funktioniert.
Es gibt 2 Javascript Elemente, kann es sein, dass es deswegen nicht funktioniert?
Das ist nicht ganz ausgeschlossen, es kann z. B. sein, dass sich Variablen überschneiden. Obwohl das Skript für das Scrolling nur zwei globale Variablen hat.
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
Danke für die Info. Ich werde mal das eine Skript deaktivieren und dann spätestens morgen ein Feedback geben.
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
Hallo!

Danke für deine Tipps. Hier kommt der Stand. :))

Habe jetzt viel herum experimentiert. Habe die erste Javascript deaktiviert. Dann war die Laufleiste der Tabelle verschwunden. Im CSS habe ich overflow;auto eingestellt. Die Laufleiste vom Browser war da, allerdings nicht der Button Back to top, wenn ich nach unten scrolle. Vor dem Script dafür stand nur <style> bzw. </style>, deswegen habe ich <script> bzw. </script> ergänzt. Brachte auch keinen Erfolg. Wie von Ulich geschrieben, habe ich das eine Script vor dem </body> Tag eingefügt. Egal was ich gemacht habe. Ich hatte keinen Erfolg. Kann es sein, dass vielleicht Javascript bei der Seite gar nicht vorhanden ist oder so? Hier merkt man ich bin Kaufmann und kein Programmierer. :)

Jetzt kommen die Codes zu den oben beschriebenen Maßnahmen.

Viele Grüße
MarcK
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/lightbox.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Produktinformation</title>
        <script src="js/jquery-1.10.2.min.js"></script>

        <!--<script langauge="Javascript">

            function adjustUI()
            {
                var iWidth          = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
                var iHeight         = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
                var headerHeight    = $('#header').css( "height" );
                var footerHeight    = "10";

                $('#document').css( "height", iHeight-2 + "px" );
                $('#main').css( "height", iHeight-headerHeight.substr( 0, headerHeight.length-2 )-footerHeight + "px" );
            }

            window.onload           = function() { adjustUI(); };
            window.onresize         = function()
            {
                adjustUI();
            };
        
        </script>-->
      <script>
        <style>
          
            #myBtn {
          display: none;
               position: fixed
                bottom: 10px;
                right: 220px;
                z-index: 99;
                padding: 17px 20px 17px 20px;
                font-weight: bold;
                margin: 10px;
                background-color: grey;
                color: white;
                cursor: pointer;
                border-radius: 4px;
                float: right;
            }
            
            #myBtn:hover {
              background-color: #555;
            }
            </style>
    
        </script>
          
    

    </head>
<body onload="adjustUI();">
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
HTML:
        <!--<script src="js/lightbox.js"></script>-->



        <script>

            //Get the button
            const mybutton = document.getElementById("myBtn");
            // Get the scrollable main container
            const mainCont = document.getElementById('main');
    
            // When the user scrolls down 20px from the top of the document, show the button
            mainCont.onscroll = scrollFunction;
            function scrollFunction() {
                if (mainCont.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    mybutton.style.display = "block";
                } else {
                    mybutton.style.display = "none";
                }
            }
    
            // When the user clicks on the button, scroll to the top of the document
            mybutton.click = topFunction;
            function topFunction() {
                mainCont.scrollTop = 0;
            }
    
        </script>
    
</body>
</html>
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
Der 1. Code steht ganz oben. Der 2. Code ganz unten.
Habt ihr noch eine Idee, warum es nicht funktioniert? Werde dann morgen eure Tipps wieder ausprobieren und mich dann melden.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Auf jeden Fall hast Du da in dem CSS für den Button einen Fehler: Semikolon fehlt hinter position: fixed
Code:
    <style>
        #myBtn {
            display: none;
            position: fixed; /* Semikolon fehlte */
            bottom: 10px;
            right: 220px;
            z-index: 99;
            padding: 17px 20px 17px 20px;
            font-weight: bold;
            margin: 10px;
            background-color: grey;
            color: white;
            cursor: pointer;
            border-radius: 4px;
            /* float: right; */ /* ueberfluessig */
        }

        #myBtn:hover {
            background-color: #555;
        }
    </style>
Das führt dazu, dass der Button nicht unten in der Tabelle auftaucht sondern ganz rechts oben neben dem Header. Das auf jeden Fall beheben.
Davon abgesehen kann ich machen was ich will, der Button taucht mit tödlicher Präzision auf, wenn ich in der Tabelle nach unten scrolle.
Außerdem ist dieses adjustUI vollkommen überflüssig, man kann das Layout mit Flex mit wenigen Zeilen im CSS so einrichten.
 
Zuletzt bearbeitet:

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
Vielen Dank für eure Unterstützung. Habe die Änderungen durchgeführt. Der Button tauch nicht auf. Ich gebe jetzt hiermit auf. Es wäre ganz schön gewesen. Einen dynamischen Back To Top Button zu haben. Es muss allerdings auch nicht sein. In einer Test-html-Datei ohne Inhalt, taucht der Button wie gewünscht auf. Nicht in der Website-Datei. Irgendwas blockiert und ich weiß nicht was. Ich bleibe dem Forum erhalten. Ihr seid klasse. Hier findet man viele nützliche Tipps und Verbesserungsvorschläge.
Viele Dank und viele Grüße, MarcK
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Das ist ja bedauerlich. Schade, dass Du die URL nicht posten kannst, wahrscheinlich wäre es nur eine Kleinigkeit gewesen.
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
Guten Morgen Community,

bis jetzt immer mal wieder nach einer Lösung gesucht. Allerdings noch keine Lösung gefunden. Die Website kann ich leider nicht zur Verfügung stellen, aber die HTML-Datei und auch die Javascript-Datei. Ist es möglich, dass vielleicht jemand aus der Community mal sich die Datei anschaut? Vielleicht erkannt man dann den Fehler?
Freue mich auf eure Antwort.

Viele liebe Grüße, MarcK
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
Boss hat was dagegen. Geht doch nicht. Ich melde mich, wenn ich eine Lösung gefunden haben.

Sorry und Gruß, MarcK