Zum Seitenanfang springen

DavidNF

Ich möchte gerne einen Anker einbauen, der den User immer wieder zum aktuellen! Seitenanfang bringt. Derzeit sieht mein Code folgender maßen aus:

Code

<a href="index.php#top">Top</a>

So wird der User allerdings zurück auf die Startseite gebracht. Da liegt wohl ein Denkfehler von mir vor, ich weiß allerdings auch nicht die Lösung - hoffentlich kann mit jemand helfen.

Gruß

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Nur href="#top". ;-) Und #top muss natürlich die ID des obersten Elementes deiner Seite sein (bei WP-Themes ist das im Normalfall eher #header).
SELFHTML: HTML/XHTML / Verweise (Links) / Projekt-interne Verweise

DavidNF

Zitat von marX

Nur href="#top". ;-) Und #top muss natürlich die ID des obersten Elementes deiner Seite sein (bei WP-Themes ist das im Normalfall eher #header).
SELFHTML: HTML/XHTML / Verweise (Links) / Projekt-interne Verweise

Ahja, natürlich! Wie blöd von mir!

derblog

muss das dann so ähnlich aussehen?:

Code

<a name="anfang">#header</a>




<p><a href="#anfang">Top</a>

wenn ja, wo genau muss ich es einfügen?

maxe

bei dir gibt es ziemlich weit oben schon einen DIV id=header (bzw. ganz oben gbt es einen Div "wrap"). Also brauchst du keinen eigenen anlegen. Und dort wo du den Link nach oben haben willst, kommt dann nur das rein:

HTML

<a href="#header">Top</a>

derblog

ok, werd´s mal versuchen.
danke dir!
hab gerade gesehen, dass mein footer, sowie die rollover-funktion bei den bildern im blog im IE falsch dargestellt werden......
wie behebt man denn sowas?:?

Dunkelangst

Also ich würde gerne ebenfalls so ein "Zum Seitenanfang" in mein Theme integrieren.

Dies habe ich nun wie folgt realisiert:
In der index.php habe ich folgenden Code eingefügt:

PHP

<div class="page-navigation">
  <div class="alignleft">
    <?php next_posts_link('Vorherige Artikel') ?>
  </div>
 <div class="alignup">
  <p><a href="#header">Zum Seitenanfang</a></p> 
  </div>
  <div class="alignright">
    <?php previous_posts_link('Nächste Artikel') ?>
  </div>
</div>

Alles anzeigen

Das funktioniert auch schon soweit. Ich hab allerdings per style.css eine kleine Grafik vor dem Link positioniert, die mit einem Pfeil nach oben zeigt. Hier ist mein css Code:

Code

img.alignleft {
    border: #ddd 1px solid;
    float: left;
    display: inline;
    padding: 5px;
    margin: 0px 7px 2px 0px;
}


img.alignup {
    display: inline;
    padding: 5px;
    margin: 0px 0px 0px 0px;
}


img.alignright {
    display: inline;
    margin: 0px 0px 2px 7px;
    padding: 5px;
    float: right;
}
.alignleft {
    color: #acacac;
    display: block;
    float: left;
    font-size: 10px;
}


.alignleft a, .alignleft a:visited {
    background: url(images/alignleft01.gif) no-repeat left center;
    color: #acacac;
    margin: 0px;
    padding: 0px 0px 0px 16px;
    text-decoration: none;
}


.alignleft a:hover {
    background: url(images/alignleft02.gif) no-repeat left center;
    color: #536d88;
    margin: 0px;
    padding: 0px 0px 0px 16px;
    text-decoration: underline;
}


.alignup {
    color: #acacac;
    display: block;
    font-size: 10px;
        margin-left:auto;
        margin-right:auto;
}




.alignup a, .alignup a:visited {
    background: url(images/alignup01.gif) no-repeat center;
    color: #acacac;
    margin: 0px;
    padding: 0px 0px 0px 16px;
    text-decoration: none;
        align:center;
}


.alignup a:hover {
    background: url(images/alignup02.gif) no-repeat center;
    color: #536d88;
    margin: 0px;
    padding: 0px 0px 16px 0px;
    text-decoration: underline;
}


.alignright {
    color: #acacac;
    display: block;
    float: right;
    font-size: 10px;
}


.alignright a, .alignright a:visited {
    background: url(images/alignright01.gif) no-repeat right center;
    color: #acacac;
    margin: 0px;
    padding: 0px 16px 0px 0px;
    text-decoration: none;
}


.alignright a:hover {
    background: url(images/alignright02.gif) no-repeat right center;
    color: #536d88;
    margin: 0px;
    padding: 0px 16px 0px 0px;
    text-decoration: underline;
}

Alles anzeigen

Leider kann ich dieses "Zum Seitenanfang" nicht in der Mitte zwischen "Vorherige Artikel" und "Nächste Artikel" positionieren. Auch hat diese kleine Änderung den Button "Nächste Arikel" ne Etage tiefer befördert. Siehe Grafik im Anhang; siehe Link (ganz unten).

Ich glaub ich seh den Wald vor lauter Bäumen nicht. Hat jemand eine Idee?

telekommander

Probiers mir negativen [FONT="Courier New"]margins[/FONT]. Zumindest als Workaround:

Code

.alignright {
	color: #acacac;
	display: block;
	float: right;
	font-size: 10px;
[COLOR="Red"]margin-top: -28px;[/COLOR]
}

Dunkelangst

Danke für deine Hilfe!! Das hat schon einmal geholfen.

Der "Nächste Artikel" Button ist nun wieder auf der selben Höhe. Leider bleibt der Abstand zwischen dem Button und dem footer erhalten - der ist nämlich auch zu groß.

Der "Zum Seitenanfang" Button bleibt natürlich unverändert. Ich kann den einfach nicht positionieren...

Hier noch einmal der Link (ganz nach unten scrollen).

Edit:
Hab die Schnauze voll. Ich entferne das wieder. Hab für den Nerv irgendwie keinen Nerv mehr.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Zum Seitenanfang springen

Jetzt mitmachen!