Nach oben button in html?
Hallo,
Ich möchte für meine Webseite einen button machen auf dem einfach nur ein Pfeil nach oben zusehen ist und mit dem man nach oben springen kann. Ich kann jetzt schon den Button machen, aber ich möchte, dass der Button immer wenn ich scrolle mit runter gleitet. Kennte jemand dafür einen Code und kann mir helfen???
Danke schonmal
revoc
3 Antworten
align: bottom, wenn dir das hilft :) - mit border kannst du auch den Abstand von unten festlegen
In deinem Titel (der natürlich oben sein Sollte) füge so eine ID ein:
<a name="top"><h1>Beispielsseite</a>
und füge wo gewünscht einen Bild mit dem Pfeil ein und referenziere so den Titel:
<a href="#top"><img src="Beispielbild"></a>
Um den Button zu fixieren brauchst du ein wenig mehr Aufwand. Es gibt verschiedene Wege um das zu erreichen.
Google mal nach "Sticky Button html" oder ähnliches.
Hier ein ungetester Code den du selbstverständlich anpassen müsstest.
Sticky Button CSS (Gebe dem Button das Attribut class="center")
.center{
position: fixed;
top: 50%;
right: 0px;
width: 115px;
height: 0px;
text-align:right;
z-index:9999;
margin-top:-15px;
}
.center a{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
background: #06c;
text-align:center;
height: 15px;
width: 165px;
padding: 8px 16px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff;
}
.center a:hover {
background: #CCC;
}