Autor Zpráva
Leo3
Profil
Ahojte, na ukazkovej stranke nefunguje korektne historia.

Stlacim napr. najprv ABOUT, potom SERVICES a potom PORTFOLIO.
Ked teraz idem na predoslu stranku, t.j. kliknem v prehliadaci sipku spat, tak sa spravne upravi adresa stranky
na ...full.htm#services, lenze obsah stranky ostane rovnaky, cize stranka realne ostane na PORTFOLIU.
Ked opat kliknem v prehliadaci na sipku spat, zobrazi sa uz stranka services, no adresa je ...full.htm#about
Obsah stranky je o jeden klik pozadu oproti adrese.
Ako to upravim aby sa zmenila aj adresa, aj obsah stranky?

Myslim ze je chyba v javascripte. Lebo ked zapoznamkujem tento javascript, tak historia funguje.
Len potom nejde pomale skrolovanie po kliknuti na polozku v menu.
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 900, function(){
   
      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  });
  
  // Slide in elements on scroll
  $(window).scroll(function() {
    $(".slideanim").each(function(){
      var pos = $(this).offset().top;

      var winTop = $(window).scrollTop();
        if (pos < winTop + 600) {
          $(this).addClass("slide");
        }
    });
  });
})

Chcel by som to spravit tak, aby fungovalo aj zobrazovanie #zaloziek (kotiev), aj pomale skrolovanie, aj aby historia fungovala korektne.
Ako to spravit?
Leo3
Profil
Uz to funguje. Do kazdej polozky menu v html treba pridat triedu, napr. goto:
      <ul class="nav navbar-nav navbar-right">
        <li><a class="goto" href="#about">ABOUT</a></li>
        <li><a class="goto" href="#services">SERVICES</a></li>
        <li><a class="goto" href="#portfolio">PORTFOLIO</a></li>
        <li><a class="goto" href="#pricing">PRICING</a></li>
        <li><a class="goto" href="#contact">CONTACT</a></li>
      </ul>
A do javascriptu na koniec html treba pridat:
$('.goto').click(function(e) {
  e.preventDefault();
  if(history.pushState) { // Test podpory
    history.pushState( null, null, $(this).attr('href') );
  }
});
Po uprave funguje historia v prehliadaci korektne.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: