[melcom]

Hallo

ohje, diese Ueberschrift ... ich wusste jetzt nicht, wie ich mich richtig ausdruecken sollte. Sorry.

Also folgendes, ich habe mir einen html-Code gebastelt, der mich ueber eine Bilddatei (einem Pfeil oder in meinem Fall ein Puzzle-Teil) an den Anfang meiner Web-Seite fuehrt. Problem bei dem Code ist, die Bilddatei ist immer eingeblendet. Meine Idee war, die Bilddatei erst einblenden zu lassen, wenn man ein kleines Stueck runter gescrollt ist. Nur habe ich null Plan, wie das funktioniert. Eine Suche im Netz bringt mir so unendlich viele Beispiele, aber keines hilft wirklich. Ich kenne mich in Sachen HTML / CSS nun auch nicht besonders gut aus. Ich wuerde zudem CSS vermeiden wollen - wenn es geht.

Vielleicht kennt sich ja hier jemand aus und koennte meinen Code modifizieren oder mir einen Tipp geben, was ich noch einzubauen habe(?)

Hier mein Code (meine Bilddatei lasse ich hier mal in dem Code drin stehen und nehme sie vielleicht spaeter raus):

<!--Back to top button-->
<div id="topcontrol" style="bottom: 5px; cursor: pointer; opacity: 1; position: fixed; right: 265px;" title="Scroll to Top">
<a href="#top">
<img alt="Back to top" height="48" src="https://1.bp.blogspot.com/-4Om48qe6pu0/YQ9vZn14HVI/AAAAAAAAEJY/SkK2_7tU9XU4pGMs6uFTaz_Gof0s0b0NwCLcBGAsYHQ/s48/melcom-Puzzle_M_%2523001b_48x48.png" title="Back to top" width="48" /></a>
</div>

Hoffe, man kann da was tun(?) ... Wenn das nur ueber CSS oder sogar Java(?) zu bewerkstelligen ist, gehe ich zum Notplan ueber und lasse die Bilddatei eben eingeblendet - auch wenn man schon oben am Anfang der Seite angekommen ist.

Lieben Dank fuer eventuelle Hilfe / Antwort.
- melcom

[melcom]

Guten Abend

sohooo ... ich habe es hinbekommen und natuerlich moechte ich euch die Loesung meines Problems nicht vorenthalten. Bitte habt Nachsicht mit mir, wenn in dem folgenden Code noch nicht alles korrekt sein solle. Ich bin kein Profi in Sachen HTML und habe eigentlich nur den gefundenen Code angepasst und herumexperimentiert, bis ich zu dem Resultat kam, mit dem ich leben kann.

Oben im Posting #01 von mir ist ja der Code, den ich mir zusammengebastelt habe, aber mit dem ich nicht zufrieden war. Mein Symbol (welches ich mir ebenfalls zusammengebastelt habe) war leider iMMER SiCHTBAR und das wollte ich ja nicht ...

Mit dem folgenden Code sieht man mein Symbol erst einmal nicht. Wenn man beginnt meine Web-Seite nun ein wenig herunterzuscrollen, tritt mein Symbol (in meinem Fall ein Puzzle) in Erscheinung und mit klick darauf, geht es wieder zum Anfang der Seite (Back top the top).

..:: Hier der neue Code:

<style>

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  right: 315px;
}

#myBtn:hover {
  background-color: #1C3F4C;
}
</style>

<button onclick="topFunction()" id="myBtn" title="Go to top"><img alt="Back to top" height="48" src="https://1.bp.blogspot.com/-4Om48qe6pu0/YQ9vZn14HVI/AAAAAAAAEJY/SkK2_7tU9XU4pGMs6uFTaz_Gof0s0b0NwCLcBGAsYHQ/s48/melcom-Puzzle_M_%2523001b_48x48.png" title="Back to top" width="48" /></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>

..:: Quelle des Original Codes:
How To Create a Scroll Back To Top Button (w3schools.com)




..:: Und so schaut es dann auf meiner Web-Seite aus, wenn man ein wenig runterscrollt:

Screenshot_2021_08_08_211119.jpg (565×396) (worldofplayers.de)

[Bild: Screenshot_2021_08_08_211119.jpg]




Tja, ich bin nun erst einmal zufrieden und vielleicht kann ich ja hier auch noch jemanden helfen, der selbst eine Web-Seite hat und so ein "Feature" sucht.
Sollte an meinem Code was nicht stimmen / passen, dann helft mir doch bitte. Ich habe diesen Code ja nur etwas modifiziert, damit es fuer mich passt und ich bin kein Profi - wie schon gesagt.

Kommt gut in die Woche
- melcom