Płynne przejścia typu "One Page". Opcje

[wilku00]

Witam, otóż od kilku godzin męczę się z problemem utworzenia płynnych przejść dla strony typu "One Page". Nie jestem zaawansowanym użytkownikiem w tych sprawach a raczej - ciągle się uczę. Więc tutaj proszę was o pomoc.

Sprawdzałem wiele rozwiązań, które można znaleźć w internecie ale po prostu nie działały u mnie a dlaczego? Nie wiem. Dodam, że w tej chwili moje menu posiada odnośniki do id z każdej sekcji i nie wygląda to zbyt dobrze a raczej nie działa w ogóle płynie. Posługiwałem się już wieloma skryptami JS, które miały mi pomóc ale jakoś rezultaty do tej pory nie przyniosły. Posiada ktoś jakiś sprawdzony sposób?

[Comandeer]

Chodzi Ci o płynne przewijanie? Jeśli tak, to proponuję coś takiego: http://jsfiddle.net/Comandeer/149uazv0/ (zauważ, że to rozwiązanie zmienia adres, w przeciwieństwie do większości tego typu skryptów w Sieci).

[wilku00]

Dobra, tak więc muszę użyć tego kodu JS a co z HTML? Czy obowiązkowe jest tutaj używanie Class="section" lub class="header-menu-item"?

U mnie wygląda to tak:

Kod

<header class="page-header">
            <div class="page-header-content container">
                <div class="menu-button-container">
                    <i id="menu-button" class="menu-button fa fa-reorder"></i>
                </div>
                <nav id="nav-top" class="nav-top">
                    <ul>
                        <li><a href="#1">1</a></li>
                        <li><a href="#2">2</a>
                        <ul>
                        <li><a href="#4">4</a></li>
                        </ul>
                    </ul>
                    <h1 class="logo-primary"><a href="#slider-container"><img id="logo-1" alt="Bakery" src="images/logo.png"/></a></h1>
                    <div class="logo-secondary"><a href="#slider-container"><img id="logo-2" alt="Bakery" src="images/logo_secondary.png"/></a></div>
                    <ul>
                        <li><a href="#3">3</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </header>

I przy sekcji załóżmy tak:

Kod

<section id="1">
            <div class="section-content">
                <div class="container">
                    <header class="section-header">
                        <h1>O nas</h1>
                        <p>Lorem ipsum - przykladowy tekst</p>
                    </header>

[Comandeer]

Klasy nie są wgl ważne - skrypt posługuje się jedynie [id] elementów. Musisz jedynie na końcu body dołączyć jQuery i mój skrypt i powinno śmigać.

[wilku00]

Nie działa. Nie wiem gdzie robię błąd, nie wydaję się to być trudne a jednak to ciągle nie widzę efektu. Strona zamiast płynie się przewijać po prostu skaczę. Dodałem twój skrypt do folderu "js" i wrzuciłem przy końcu "body":

Kod

<script type="text/javascript" src="js/script.js"></script>

Gdzie może być błąd?

[Comandeer]

A dołączyłeś najpierw jQuery? Bez niego nie zadziała.

Warto też sprawdzić czy konsola przeglądarki czegoś nie rzuciła

[wilku00]

Jquery jest także dołączone jak i inne skrypty, ponieważ szablon jest zakupiony. Przeglądarka? Hm, żadnych błędów nie zauważyłem. Inne strony tego typu działają u mnie poprawnie, próbowałem nawet z nich wykorzystać kod aby uzyskać ten efekt i na marne.

[Comandeer]

Zarzuć gdzieś wersją online, żeby to obadać na żywym organizmie - będzie łatwiej

[wilku00]

Przepraszam za serwer, ale to na szybko: link

Ten post edytował wilku00 27.06.2015, 16:23:51

[Comandeer]

A zmień

Kod

$('.header-menu').on('click', 'a', function(e)

na

Kod

$('.nav-top').on('click', 'a', function(e)

[wilku00]

Miałem źle podpisaną tą klasę, najwyraźniej.

Dziękuję za pomoc, działa znakomicie. Temat do zamknięcia.

Wystąpił drobny problem odnośnie tego kodu. Wszystko działa poprawnie, tak jak chciałem, ale gdy załączę link aby przekierowywało go w menu to nie działa. Gdy cofnę kod na poprzedni to wszystko wporządku? Można jakoś temu zapobiec, aby strona "zjeżdżała płynnie" i jednocześnie odczytywała odnośniki?

Kod

$('.header-menu').on('click', 'a', function(e)

Ten post edytował wilku00 27.06.2015, 16:23:00

[Comandeer]

Kod

$('.header-menu').on('click', 'a[href^=#]', function(e)

Coś takiego powinno pomóc