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

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

Marc Kluss

Neues Mitglied
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
 
Werbung:
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>
 
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
 
Werbung:
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
 
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>
 
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
 
Werbung:
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;

}
 
Werbung:
wau, bist du schnell. :)
Ich teste das gleich und melde mich spätestens am Montag für eine Rückmeldung!
Danke und Gruß
Marc
 
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
 
Werbung:
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.
 
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
 
Werbung:
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();">
 
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>
 
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.
 
Werbung:
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
 
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
 
Zurück
Oben