• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

nie działa animacja animate.scrollTop

VPS Starter Arubacloud
0 głosów
325 wizyt
pytanie zadane 6 lipca 2017 w JavaScript przez Kamil Stoksik Początkujący (490 p.)

Witam,

mam problem z kodem który znajduje się ponieżej. Niestety strona jedynie przeskakuje w miejsce o które chodzi ( po kliknięciu w gallery do galerii itp.) lecz niestety jedynie przeskakuje, brakuje animacji. Skrypt skopiowany z neta i dostosowany.

Oraz 2 pytanie czy można coś zrobić z tym że każdy div po przesunięciu się strony wchodzi pod manubar przez co jest obcięty?

Pozdrawiam

<!DOCTYPE html>
<html lang="pl">
<head>
    <script src="jquery-3.2.1.js"></script>
    <script src="jquery.scrollTo.js"></script>
    <meta charset="UTF-8">
    <title></title>
    <scrpit>
    $(document).ready(function() {

    $('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
    event.preventDefault();
    $('html, body').animate({
    scrollTo: target.offset().top -70
    }, 1000);
    }
    });

    });
    </scrpit>

</head>
<link rel="stylesheet" href="pc.css"></link>

<body>
<div id="menubar">
    <div style="width: 5%; float: left;">a</div>
    <a href="#home"><h6>HOME</h6></a>
    <a href="#about"><h6>ABOUT</h6></a>
    <a href="#apartments"><h6>APARTMENTS</h6></a>
    <a href="#gallery"><h6>GALLERY</h6></a>
    <a href="#cracow"><h6>CRACOW</h6></a>
    <a href="#contact"><h6>CONTACT</h6></a>
    <div style="clear: both"></div>
</div>
<div style="float: left; width: 10%;">a</div>
<div id="page">
    <div class="mpage" ID="home">home</div>
    <div class="mpage" ID="about">about</div>
    <div class="mpage" ID="apartments">apartments</div>
    <div class="mpage" ID="gallery">gallery</div>
    <div class="mpage" ID="cracow">cracow</div>
    <div class="mpage" ID="contact">contact</div>
    <div style="clear: both"
</div>

<script>
    $(document).ready(function() {

    });
</script>
</body>
</html>
html, body
{
    min-width: 800px;
    width:  100%;
    height: 100%;
    border: 0px;
    padding: 0px;
    margin: 0px;
}
#menubar
{
    min-width: 800px;
    text-align: center;
    background-color: black;
    height: 60px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1;
}
.but
{
    float: left;
    width: 15%;
    height: 20px;
    background-color: cadetblue;
}
a
{
    width: 15%;
    float: left;
    color: white;
    text-decoration: none;
    font-family: calibri;
}
#odst
{
    height: 60px;
    width: 100vw;
    background-color: aqua;
    clear: both;
}
#page
{
    float: left;
    width: 80vw;
    height: 100%;
}
.mpage
{
    height: 100vh;
    background-color: darkkhaki;
    border: 2px;
    border-style: solid;
    border-color: cadetblue;
}

 

1
komentarz 6 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
$('a[href^="#"]')

nie lepiej zamiast takiego selektora dać po prostu osobną klasę dla elementów podlegających "scrollowaniu"? Wg mnie byłoby to bardziej eleganckie rozwiązanie.

Co do menu to lepiej zrobić to na liście UL, np.

<nav>
    <ul>
        <li><a></a></li>
        <li><a></a></li> 
        <li><a></a></li>
    </ul>
</nav>

i teraz możesz dodać jakąś klasę do każdego <li> i po niej wybierać elementy (np. poprzez document.querySelectorAll albo jQuery), albo lepiej zastosować event delegation i przypisać zdarzenie "click" do elementu <ul>, a następnie weryfikować target.nodeName lub target.matches(selector). Więcej o event delegation znajdziesz np. TUTAJ.

 

Dodatkowo wszystkie skrypty JS umieść przed znacznikiem </body> chyba, że masz konkretny powód aby wcześniej zacząć realizować skrypt (ale tutaj takiego powodu za bardzo nie widzę). Ewentualnie poczytaj o async / defer - TUTAJ jest to dobrze wyjaśnione "obrazkowo".

1 odpowiedź

+1 głos
odpowiedź 6 lipca 2017 przez E1 Obywatel (1,810 p.)
edycja 6 lipca 2017 przez E1
Masz błąd we wstawionym skrypcie: scrpit zamiast script (chodzi o znacznik). Bez tego cały skrypt nie zadziała, jeśli jest cos głębiej to i tak musisz zacząć od tego. Poza tym widzę tu słabe fundamenty w rodzaju umiejscowienia tego skrawka, którego oczekiwałbym tuz przed </body>.

Co do drugiego pytania, to można dać margines, wsadzić do kontenera z marginesem itd. Są różne sposoby i jest to względnie łatwe do osiągnięcia.
komentarz 6 lipca 2017 przez Kamil Stoksik Początkujący (490 p.)
dzieki Wam wielkie za szybką odpowiedź wrzuciłem skrypt na koniec i działa.

Proszę napisz co mam wrzucić w dodatkowy kontener?

Cała zawartość strony jest w page a menu w menubar?
komentarz 6 lipca 2017 przez E1 Obywatel (1,810 p.)
komentarz 6 lipca 2017 przez Kamil Stoksik Początkujący (490 p.)
Ok dzięki wielkie. Jutro zawalcze to dam znać ale chyba takie wyjście będzie ok. Margines przy finalnej kolorystyce nie będzie widoczny.

Podobne pytania

+1 głos
2 odpowiedzi 129 wizyt
0 głosów
1 odpowiedź 486 wizyt
pytanie zadane 21 sierpnia 2018 w JavaScript przez hun1er76 Stary wyjadacz (11,960 p.)
0 głosów
1 odpowiedź 328 wizyt
pytanie zadane 19 grudnia 2018 w HTML i CSS przez kubekszklany Gaduła (3,170 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...