Forum PHP.pl > Płynne przejścia typu "One Page".

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Płynne przejścia typu "One Page".

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

wilku00

26.06.2015, 16:06:20

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

26.06.2015, 16:21:47

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

26.06.2015, 16:29:37

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

26.06.2015, 16:37:03

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

26.06.2015, 16:48:10

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

Gdzie może być błąd?

Comandeer

26.06.2015, 16:53:52

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

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

wilku00

26.06.2015, 18:27:50

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

26.06.2015, 18:30:38

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

wilku00

27.06.2015, 16:07:16

Przepraszam za serwer, ale to na szybko: link

Comandeer

27.06.2015, 16:15:15

A zmień

Kod

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

Kod

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

wilku00

2.07.2015, 21:25:45

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)

Comandeer

2.07.2015, 21:56:44

Kod

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

Coś takiego powinno pomóc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.