Clicking op een #sectienaam laat de pagina verschuiven?

Door Danny T op 09-12-2013 15:44

3.682 views

Hallo allemaal!

Weet iemand hoe dit komt en hoe ik dit kan tegenhouden?
Met wat testjes op een website waarmee ik naar verschillende paginas gaat in de index.php.
Krijg ik het volgende probleem, als ik bijvoorbeeld navigation menu heeft home sectie1 sectie sectie3 als links naar de desbetreffende secties.
Wanneer ik een beetje scroll op de website en dan click om naar een andere sectie te gaan dan springt de pagina ipv dat die op dezelfde plek blijft en alleen van page veranderd. Het zit wel in dezelfde pagine alleen dan tijdens het veranderen gaat die schuiven volgens mij?

Regards,

Danny T

09-12-2013 18:01 gewijzigd op 09-12-2013 18:21

- SanThe - op 09/12/2013 17:55:40

De oplossing van Kris lijkt mij perfect.

Helaas werkte die oplossing niet, misschien dat ik het verkeerd deed want toen ik het probeerde gebeurde er precies hetzelfde. Moet ik die div id weghalen en dan pas die naam erin zetten of die naam voor die div?

EDIT: Ik ga proberen de schermhoogte laten automatisch aanpassen voor elke resolutie.

Dank jullie wel voor jullie hulp.

Onbekende gebruiker

09-12-2013 19:12

Je kan bij de hoogte ook 100% invullen, dan pakt hij gewoon de hoogte van het scherm.

Kris Peeters

10-12-2013 09:10 gewijzigd op 10-12-2013 09:11

Danny T op 09/12/2013 18:01:11

Helaas werkte die oplossing niet,

O ja, ik zie wat je bedoelt.
(het content venster scrollt wel naar de juiste plek; maar ook de pagina zelf. Dus twee scroll bars die reageren)

Okay, andere tactiek.
Probeer dit eens uit; in een leeg .htm bestand.

Dus, in plaats van een content venster met scroll te maken;
heb ik een gewone pagina, waarbij de navigatie altijd op zijn plaats blijft staan.

Kan je daar mee verder?


<!doctype html>
<html>
  <head>
    <style>
      .vulling {
        /* dit simuleert een pagina met eventueel veel content.  
        Jij hebt .vulling niet nodig. */
        height: 800px;  
      }
      #content {
        border: 1px solid #aaaaaa;
        width: 840px;
        margin-left: 140px;
      }
      .navigation {
        position: fixed;
        z-index: 10;
        top: 100px;
        border: 1px solid #aaaaaa;
      }
      li {
        list-style: none;
        margin: 0;
      }
      ul {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
<body>
  <ul class="navigation">
    <li><a href="#home">Home</a></li>
    <li><a href="#menu">Menu &amp; Catering</a></li>
    <li><a href="#opening">Openingstijden</a></li>
    <li><a href="#actie">Actie</a></li>
    <li><a href="#locatie">Locatie</a></li>
  </ul>
  
  <div id="content">
    <a name="home"></a>
    <h2>Home</h2>
    <div class="vulling">bla bla </div>

    <a name="menu"></a>
    <h2>Menu &amp; Catering</h2>
    <div class="vulling">bla bla </div>

    <a name="opening"></a>
    <h2>Openingstijden</h2>
    <div class="vulling">bla bla </div>

    <a name="actie"></a>
    <h2>Actie</h2>
    <div class="vulling">bla bla </div>

    <a name="locatie"></a>
    <h2>Locatie</h2>
    <div class="vulling">bla bla </div>
  </div>
  
</body>
</html>

Reageren

Inloggen om te reageren