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

Marc Kluss · 18 März 2021

Hallo Community! bin neu hier. Habe versucht in dem Forum zu lesen, ob schon jemand einen vergleichbaren Fall hatte. Habe ich nicht gefunden, falls doch bitte verlinken oder so.

Eigentlich ist ein Scroll Back To Top Button der erst beim scrollen erscheint kein Problem, eigentlich!
Auf der Website fehlen die Laufleisten vom Browser, sondern die Tabelle (zentriert und nicht 100%) hat eine eigene Laufleiste. Wie kann ich meinem Scipt sagen, dass er reagieren soll, wenn die Tabelle nach unten gescrollt wird únd ansonsten der Browser statisch ist. Also sonst bewegt sich im Browser nichts. Ich bin kein Profi, ich hoffe ich habe als Amateur mein Problem richtig beschrieben.

Freue mich auf eure Antworten.

Viele liebe Grüße, Marc

Marc Kluss · 19 März 2021

Super, vielen, vielen Dank für die Info. Hier kommen Teile des Quellcodes:

<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>

<style>

#myBtn {
/* display: none; =Das ist nur deaktiviert, damit den den Button überhaupt sehe */
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>

}

</head>
<body onload="adjustUI();">
<button onclick="topFunction()" id="myBtn" title="Go to top">^</button>

<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.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
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

basti1012 · 19 März 2021

Er benutzt auch 2 Mal onload

Code:

 1mal hier
window.onload = function() { adjustUI(); };
das 2 te mal hier
<body onload="adjustUI();">

Wenn ich das richtig sehe, ist das auch unnötig

Marc Kluss · 19 März 2021

Super, danke für die Rückmeldung. Das mit dem Code über Codetags posten wußte ich nicht. Hier kommt erst einmal ein Screenshot. Der Code kommt gleich.

Screenshot_2021-03-19 Produktinformation.png

Marc Kluss · 19 März 2021

Hier kommt der mehr Code ohne Links und Bilder (da ich das beruflich benötige) Sorry

Code:

<!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>

        

        <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>

          

        }

 

    </head>

<body onload="adjustUI();">

    <button onclick="topFunction()" id="myBtn" title="Go to top">^</button>

 

<script>

//Get the button

var mybutton = document.getElementById("myBtn");

 

// When the user scrolls down 20px from the top of the document, show the button

window.onscroll = function() {scrollFunction()};

 

function scrollFunction() {

  if (document.body.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

function topFunction() {

  document.body.scrollTop = 0;

  document.documentElement.scrollTop = 0;

}

</script>

 

    <div id="document">

        <div id="header">

            <br><br><br>

          

            <div class="headertopic_left">Bild</div>

            <div class="headertopic">Systemname/Produktionsjahr</div>

            <div class="headertopic">Dokumente</div>

            <div class="headertopic_right">Software</div>

        </div>

      <div id="main">

            <div class="productTopic"><br><h2 id="></h2></div>

            <div class="productItemRowGrey">

                <div class="productItemPictureCell">

                </div>

                <div class="productItemSoftwareCell">

                  

                </div>

            </div>

            <div class="productItemRowWhite">

                <div class="productItemPictureCell"><a></a></div>

                <div class="productItemSystemnameCell"></div>

                <div class="productItemDocumentsCell">

                        <img src="images/pdf.gif" /><br />

                </div>

                <div class="productItemSoftwareCell">

                    <img src="images/zip.gif" /></a><br />

                </div>

            </div>

            <div class="productItemRowGrey">

                <div class="productItemPictureCell"><a ></a></div>

                <div class="productItemSystemnameCell"></div>

                <div class="productItemDocumentsCell">

                        <img src="images/pdf.gif" /><br />

                </div>

                <div class="productItemSoftwareCell">

                    <img src="images/zip.gif" /></a><br />

                </div>

            </div>

             <div class="productItemRowWhite">

                <div class="productItemPictureCell"><a></a></div>

                <div class="productItemSystemnameCell"></div>

                <div class="productItemDocumentsCell">

                      <br />

                </div>

                <div class="productItemSoftwareCell">

                    <img src="images/zip.gif" /><a></a><br />

                </div>

            </div>

            <div class="productItemRowGrey">

                <div class="productItemPictureCell"><a ></a></div>

                <div class="productItemSystemnameCell"></div>

                <div class="productItemDocumentsCell">

                      

                </div>

                <div class="productItemSoftwareCell">

                    <img src="images/zip.gif" />

                </div>

            </div>

            <div class="productItemRowWhite">

                <div class="productItemPictureCell"></div>

                <div class="productItemSystemnameCell"></div>

                <div class="productItemDocumentsCell">

                        

                 </div>

                 <div class="productItemSoftwareCell">

              

                </div>

            </div>

            <div class="productTopic"><br><h2 ></h2></div>

            <div class="productItemRowGrey">

                <div class="productItemPictureCell"></a></div>

                <div class="productItemSystemnameCell">

                <div class="productItemDocumentsCell">

                    <img src="images/pdf.gif" />

                </div>

                <div class="productItemSoftwareCell">

                    <img src="images/zip.gif" />

                  

                </div>

            </div>

            <div class="productItemRowWhite">

              

                </div>

                <div class="productItemSoftwareCell">

                  

                </div>

            </div>

            <div class="productItemRowGrey">

                

                </div>

                <div class="productItemSoftwareCell">

                  

                </div>

            </div>

            <div class="productTopic"><br><h2 </h2></div>

            <div class="productItemRowWhite">

              

                </div>

                <div class="productItemSoftwareCell">

            

                </div>

            </div>

            <div class="productItemRowGrey">

            

                </div>

                <div class="productItemSoftwareCell">

                

                </div>

  

                <div class="productItemDocumentsCellLarge"> 

                </div>

                

                    

 

              

            </div>

            

      

            

        </div>

        

        </div>

    </div>

  

    <script src="js/lightbox.js"></script>

    

</body>

</html>

Marc Kluss · 19 März 2021

Das ist quasi so, wie jetzt die Laufleiste bei dem eingefügen Code oben.

Ich wünsche euch allen ein schönes Wochenende.
Viele Grüße, Marc

Marc Kluss · 19 März 2021

CSS kommt gleich.
In den Tabellen sind nur Links zu Dokus und Bilder der Produkte.

Marc Kluss · 19 März 2021

CSS:

@charset "utf-8";

 

* {

    margin: 0;

    padding: 0;

}

html, body {

    margin: 0 0 0 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 0.9em;

    height: 100%;

    overflow:hidden;

}

 

#document{

    width:100%;

    text-align: center;

}

 

#header{

    width:1000px;

    background: #ffffff;

    margin: 0 auto;

}

 

#revision{

    text-align:left;

}

 

#main{

    width:998px;

    margin: 0 auto;

    border:1px solid black;

    overflow:auto;

}

 

.headertopic_left{

    border-left:1px solid black;

}

 

.headertopic_right{

    border-right:1px solid black;

}

 

.headertopic_left, .headertopic, .headertopic_right {

    background: url(../images/config_title.gif) repeat-x;

    display: table-cell;

    height: 25px;

    width: 250px;

    font-weight: bold;

    color: #FFFFFF;

    text-align: center;

    vertical-align: middle;

    border-bottom: 1px solid black;

 

}

 

.productTopic{

    background-color: #C8FCFF;

    text-align: center;

    height:53px;

    width:100%;

    border-bottom: 1px solid black;

  

}

 

.productTopicSupport{

    background-color: #C8FCFF;

    text-align: center;

    height:53px;

    width:100%;

    border-bottom: 1px solid black;

 

}

 

.productItemRowWhite, .productItemRowGrey {

    background-color: #ffffff;

    width: 100%;

    height:220px;

    border-bottom: 1px solid black;

 

}

 

.productItemRowWhiteLarge, .productItemRowGreyLarge {

    background-color: #ffffff;

    width: 100%;

    height:300px;

    border-bottom: 1px solid black;

  

    

}

 

.productServiceItemRowWhiteLarge, .productServiceItemRowGreyLarge {

    background-color: #ffffff;

    width: 100%;

    height:600px;

    border-bottom: 1px solid black;

  

    

}

 

.productItemRowGrey, .productItemRowGreyLarge {

    background: #cccccc;

}

 

.productItemPictureCell, .productItemSystemnameCell, .productItemDocumentsCell, .productItemSoftwareCell, .productItemPictureCellLarge, .productItemSystemnameCellLarge, .productItemDocumentsCellLarge, .productItemSoftwareCellLarge{

    padding-top:40px;

    height:180px;

    font-weight: bold;

    float:left;

    text-align:left;

    border: 0px solid red;

   /* border-right: 1px solid black;*/

    

}

 

.productItemPictureCellLarge, .productItemSystemnameCellLarge, .productItemDocumentsCellLarge, .productItemSoftwareCellLarge{

    padding-top:40px;

    height:260px;

}

 

.productItemPictureCell, .productItemPictureCellLarge{

    text-align:center;

    width:270px;

}

 

.productItemSystemnameCell, .productItemSystemnameCellLarge{

    width:250px;

}

 

.productItemDocumentsCell, .productItemDocumentsCellLarge{

    width:240px;

}

 

.productItemSoftwareCell, .productItemSoftwareCellLarge{

    width:220px;

}

a, a.active, a.focus, a.link, a.visited, a.hover {

    text-decoration: none;

    font-weight: bold;

    color: #193b53;

}

Marc Kluss · 19 März 2021

an Sempervivum: Brauchst du wirklich den Inhalt der Tabelle, um den Code besser zu verstehen?

Marc Kluss · 19 März 2021

Die Tabelle hat noch ein CSS für die Lightbox. Ich glaube das ist nicht wirchtig für scroll-Back-To.Top-Button?

Marc Kluss · 19 März 2021

wau, bist du schnell. :)
Ich teste das gleich und melde mich spätestens am Montag für eine Rückmeldung!
Danke und Gruß
Marc

Marc Kluss · 22 März 2021

Guten Morgen Ulrich, guten Morgen basti1012,

es funktioniert leider nicht. Ich werde heute selbst versuchen, ob ich meinen Fehler finde. Falls ich nicht klar komme, dann melde ich mich morgen bei euch.

Viele liebe Grüße, MarcK

Marc Kluss · 23 März 2021

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.

Marc Kluss · 23 März 2021

Danke für die Info. Ich werde mal das eine Skript deaktivieren und dann spätestens morgen ein Feedback geben.

Marc Kluss · 24 März 2021

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 · 24 März 2021

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 · 24 März 2021

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 · 24 März 2021

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.

Marc Kluss · 25 März 2021

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

Marc Kluss · 16 Juni 2021

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

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

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied