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

Kurs HTML odc. 4 nie działa mi przewijanie z JS

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
0 głosów
308 wizyt
pytanie zadane 7 września 2022 w HTML i CSS przez Podlasianin Początkujący (400 p.)

Witam robię kurs z html'a z kanałem "Pasja Informatyki" i natknąłem się na błąd, gdyż, gdy autor filmu pokazuje jak zrobić przewijanie z html wszystko mi działa, jednak, gdy pokazuje to z JS nic się nie dzieje. Proszę o pomoc. (Nie wiem tak naprawdę na jaką kategorie to dać)

Ps: Specjalnie nie dodałem tych slajdów bo mi wyskoczył błąd, że za dużo znaków


<html lang="pl">
    <head>
        <meta charset="utf-8"/>
        <title>Monitory Komputerowe</title>
        <meta name="description" content="Zobacz wszystko co powinieneś
        wiedzieć o monitorach komputerowych
        w Technikum Informatycznym."/>
        <meta name="keywords" content="monitory, ekran, technikum
        informtyczne"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>

        <link rel="stylesheet" href="style.css" type="text/css"/>
        <link 
        href='https://fonts.googleapis.com/css?family=Open Sans' 
        rel='stylesheet' type="text/css">

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script src="jquery.scrollTo.min"></script>

		<script>
			jQuery(function($)
			{
				//reset the scroll
				$.scrollTo(0);
				$('#link3').click(function() { $.scrollTo($('#maskicrt'), 500); });
			}
			);
		</script>
    </head>
    <body>
        <div id="logo">Wykład #1: Monitory Komputerowe</div>
        <div id="container">
            <div id="spis">
                <ol>
                    <li>Monitory Teleskopowe CRT
                        <ul>
                            <li>Budowa Monitora</li>
                            <li>Zasada Działania</li>
                            <li><a id="link3" href="#">Maska. Rodzaje masek</a></li>
                            <li>Wady i zalety</li>
                            <li>Dobór Parametrów</li>
                        </ul>
                    </li>
                    <li>Monitory Ciepłokrystaliczne LCD
                        <ul>
                            <li>Budowa Monitora</li>
                            <li>Zasada Działania</li>
                            <li>Maska. Rodzaje masek w monitorach</li>
                            <li>Wady i zalety</li>
                            <li>Dobór Parametrów</li>
                        </ul>
                    </li>
                    <li>Sposoby podłączenia Monitorów
                        <ul>
                            <li>DSUB</li>
                            <li>DVI</li>
                            <li>HDMI, Display Port</li>
                        </ul>
                    </li>
                    <li>Dodatkowe Informacje
                        <ul>
                            <li>Przyszłość monitorów i wyświetlaczy</li>
                            <li>Wykorzystane źródłą</li>
                        </ul>
                    </li>
                </ol>
            </div>

  

 

2 odpowiedzi

+1 głos
odpowiedź 7 września 2022 przez Comandeer Guru (607,060 p.)
<script src="jquery.scrollTo.min"></script>

Jesteś pewien, że to poprawna nazwa pliku? Bo tak na oko brakuje tutaj rozszerzenia – jquery.scrollTo.min.js.

Przy okazji:

//reset the scroll
$.scrollTo(0);

Nie rób tego! Jak zresetujesz scrolla, to zepsujesz np. przycisk "Wstecz" w przeglądarce. Wówczas za każdym kliknięciem tego przycisku, strona przewinie się na samą górę, zamiast do konkretnej sekcji. To samo się stanie, gdy się zwyczajnie odświeży stronę.

2
komentarz 8 września 2022 przez Comandeer Guru (607,060 p.)
Swego czasu napisałem też dokładny poradnik o płynnym przewijaniu na WebKrytyku: https://www.webkrytyk.pl/2020/09/30/wpadki-i-wypadki-12/
+1 głos
odpowiedź 8 września 2022 przez VBService Ekspert (256,600 p.)
edycja 8 września 2022 przez VBService

Do płynnego przewijania zamiast podpinać jquery, możesz też wykorzystać taki zapis w css

scroll-behavior: smooth  (praktycznie wszystkie przeglądarki już ten zapis "obsługują")

html
{
	scroll-behavior: smooth;
}

 

BTW, nie musisz pobierać też pliku jquery.scrollTo.min.js, wystarczy np. taki zapis

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>

 

 

P.S. na Twoim miejscu i tak dopisałbym do atrybutu href identyfikator, w razie jakby scroll z jquer-a z jakiegoś powodu nie "zadziałał"

<li><a id="link3" href="#">Maska. Rodzaje masek</a></li>

na 

<li><a id="link3" href="#maskicrt">Maska. Rodzaje masek</a></li>

 

Podobne pytania

0 głosów
1 odpowiedź 947 wizyt
0 głosów
1 odpowiedź 969 wizyt
0 głosów
1 odpowiedź 531 wizyt
pytanie zadane 12 marca 2017 w HTML i CSS przez manaskal Nowicjusz (120 p.)

93,443 zapytań

142,436 odpowiedzi

322,693 komentarzy

62,805 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

...