Header verlinkung auf #div

[BlackBoSs]

Hallo,

wie kann ich eigentlich bei einem one pager auf eine section verlinken ?

So sieht mein header aus derzeit:

    <div class="nav_wrapper">
      <nav class="container">
        <ul class="nav nav-pills">
          <li><a href="#">Hauptseite</a></li>
          <li><a href="#section_traum">Dienstleistungen</a></li>
          <li><a href="#">Referenzen</a></li>
          <li><a href="#">Kontakt</a></li>
        </ul>
      </nav>
    </div>

und die Section sieht so aus :

    <section class="section_abstand">
      <div class="container section_traum">

        <div>
          <a href="#section_traum"></a>
        </div>

        <label class="headline">Unsere Dienstleistungen</label><br>
        <label class="sub_headline">Wir machen Ihre Träume wahr!</label>
        <div class="box_traum">
          <div class="box_traum_box">
            <div class="box_traum_box_bild">
              <label>Wohnungsdesign</label>
              <img src="img/renovierung.jpg" alt="" class="img-responsive"/>

            </div>
            <p>
              Wir machen Ihre Träume wahr !
              <br><br>
              Teilen Sie uns Ihre Vorstellungen, wir planen und setzen es um !
              <br><br>
              Egal ob eine stilvolle TV – Wand , eine Steinwand als Wandverkleidung oder eine indirekte
              <br><br>
              Beleuchtung an der Decke.
              <br><br>
              Sie entscheiden – Wir verwirklichen !
            </p>
          </div>

würde mich über Hilfe und Tipps freuen ...
Habe zwar hier im a tag "#section_traum" hineingeschrieben ... und im header auch im href den selben text angegeben .. hat aber nicht geklappt

 

[ackermaennchen]

Wenn ich das richtig in Erinnerung habe müsstest du in der Section <a id="section_traum">...</a> angeben.

 

[Myhar]

Ein Anker springt immer zu einer ID, du musst also deiner <section> eine entsprechende ID geben, ein Link mit einer ID ist hier nicht notwendig.

 

[Dobi78]

Versuchs mal damit, Jetzt kommt es drauf an, ob du wirklich die Section meinst oder eher den DIV. Ich denke in deiner Frage, oder eher am Code willst Du auf einen DIV verlinken.

<section class="section_abstand">
      <div class="container section_traum">
        <div id="section_traum">
          <a href=""></a>
        </div>
        <label class="headline">Unsere Dienstleistungen</label><br>
        <label class="sub_headline">Wir machen Ihre Träume wahr!</label>
        <div class="box_traum">
          <div class="box_traum_box">
            <div class="box_traum_box_bild">
              <label>Wohnungsdesign</label>
              <img src="img/renovierung.jpg" alt="" class="img-responsive"/>
            </div>
            <p>
              Wir machen Ihre Träume wahr !
              <br><br>
              Teilen Sie uns Ihre Vorstellungen, wir planen und setzen es um !
              <br><br>
              Egal ob eine stilvolle TV – Wand , eine Steinwand als Wandverkleidung oder eine indirekte
              <br><br>
              Beleuchtung an der Decke.
              <br><br>
              Sie entscheiden – Wir verwirklichen !
            </p>
          </div>

 

[Myhar]

@Dobi78 Wozu braucht man hier das <a href=""></a>? Bzw. wozu diese div-suppe?

<section class="section_abstand">
<div class="container section_traum">
        <div id="section_traum">
          <a href=""></a>
        </div>

Kann umgeschrieben werden zu:

<section class="section_abstand" id="section_traum">

 

[Dobi78]

@Dobi78 Wozu braucht man hier das <a href=""></a>? Bzw. wozu diese div-suppe?

<section class="section_abstand">
<div class="container section_traum">
        <div id="section_traum">
          <a href=""></a>
        </div>

Kann umgeschrieben werden zu:

<section class="section_abstand" id="section_traum">

Die frage hab ich mir auch gestellt....

 

[BlackBoSs]

Habe den Code korrigiert und die ganze div Suppe gelöscht

Danke für den Tipp .. habe der section wie oben vorgeschlagen einfach eine id vergeben..

Weiß wer von euch wie ich es auch schön langsam nach unten scrollen lasse wenn man auf den link klickt statt das es sofort zu der jeweiligen id springt..

Lg

 

[Myhar]

Ja, das geht mit Javascript. Suche einfach nach "scroll to section" oder ähnliches in einer Suchmaschine deiner Wahl, am Besten in Verbindung mit dem Schlüsselwort Javascript.

 

[ackermaennchen]

Entweder per Javascript oder jquerry.

bsp: https://css-tricks.com/snippets/jquery/smooth-scrolling/

 

[Myhar]

Entweder per Javascript oder jquerry.

Du meinst jQuery. Und jQuery ist auch "nur" Javascript.