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

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

odpowiedź 7 września 2022 przez Comandeer Guru (600,810 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 (600,810 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/

odpowiedź 8 września 2022 przez VBService Ekspert (252,740 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ź 610 wizyt

Kurs C++ odc. 4 Liczby losowe, nie declarowanie Zmiennej

pytanie zadane 12 lipca 2018 w C i C++ przez Jason_Nr_1 Bywalec (2,980 p.)

0 głosów

1 odpowiedź 589 wizyt

Pierwsza strona www ,kurs html odc: 1, wstawione obrazki nie wyświetlają się

pytanie zadane 5 listopada 2016 w HTML i CSS przez Duber Nowicjusz (210 p.)

0 głosów

1 odpowiedź 304 wizyt

Kurs HTML odc. 3

pytanie zadane 12 marca 2017 w HTML i CSS przez manaskal Nowicjusz (120 p.)

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

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci