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!

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Das lässt sich wahrscheinlich ohne Probleme lösen; auch für das Scrolling der Tabelle kann man sicher einen Eventlistener registrieren. Aber dazu müsste man genauer wissen, wie das Scrolling deiner Tabelle funktioniert. Gibt da ja mehrere Varianten, Bildlaufleiste durch den Browser mit overflow: auto; oder etwas selbstgestricktes mit Javascript. Am besten wäre es, wenn Du die URL der Seite posten könntest, damit man sich das in Aktion ansehen kann.
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
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>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Da sehe ich leider nichts von der fraglichen Tabelle, die gescrollt wird, weder HTML noch CSS.

BTW: Code besser in Codetags posten, das Menüsymbol in der Werkzeugleiste rechts und dann </>.
 

basti1012

Senior HTML'ler
26 November 2017
1.678
177
63
Minden
basti1012.de
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

Neues Mitglied
12 März 2021
20
0
1
44
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

Neues Mitglied
12 März 2021
20
0
1
44
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

Neues Mitglied
12 März 2021
20
0
1
44
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
PS: Und wenn ich das beim ersten Betrachten richtig erkenne sind die Elemente in den Zeilen der Tabelle leer. So wird man kaum erkennen können, wie das Ganze aufgebaut ist.
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
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

Neues Mitglied
12 März 2021
20
0
1
44
Die Tabelle hat noch ein CSS für die Lightbox. Ich glaube das ist nicht wirchtig für scroll-Back-To.Top-Button?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Nein, das CSS für die Lightbox ist für die Aufgabe mit dem Scrolling wohl nicht relevant.
Brauchst du wirklich den Inhalt der Tabelle, um den Code besser zu verstehen?
Verstehen kann man es besser, wenn man sehen kann, wie es aussieht. Aber ich versuche mal mein Glück ... :smile: Mal sehen, was ich da zu Gesicht bekommen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Das ist relativ einfach: Der Container wird mit overflow: auto; scrollbar gemacht. Daher brauchen wir uns bei dem Javascript nur auf diesen Container zu beziehen:
Code:
    <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>
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.

BTW: Da ist noch einiges andere im Argen:
  • Doctype veraltet, verwende <!doctype html>
  • 4 schließende </div> zu viel am Ende des Body.
  • Weitere Syntaxfehler im HTML und CSS, möglicher Weise aber z. T. beim Kürzen entstanden.
  • Die Ungereimtheiten mit dem adjustUI, auf die Basti hin gewiesen hat.
 

Marc Kluss

Neues Mitglied
12 März 2021
20
0
1
44
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

Neues Mitglied
12 März 2021
20
0
1
44
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