smooth scrolling

pytanie zadane 6 stycznia 2018 w JavaScript przez matir85 Bywalec (2,410 p.)

Witam.

Chcę dodać na swojej stronie płynne przewijanie do kotwicy tzw. smooth scrolling. Na jednej ze stron w internecie polecanej na tym forum znalazłem oto taki kod, który miał mi to umożliwić

$(document).on('click', '#', function (event) {
    event.preventDefault();
    $('body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 800);
});

Niestety pomimo dołączenia go do strony brak pożądanego efektu. A nawet regres z uwagi że strona przestała nawet przeskakiwać do kotwicy. Brackets zgłasza takie błędy:

ESLint (5)
1	ERROR: '$' is not defined. [no-undef]	$(document).on('click', 'a', function (event) {
1	ERROR: 'document' is not defined. [no-undef]	$(document).on('click', 'a', function (event) {
3	ERROR: '$' is not defined. [no-undef]	$('body').animate({
4	ERROR: '$' is not defined. [no-undef]	scrollTop: $($.attr(this, 'href')).offset().top
4	ERROR: '$' is not defined. [no-undef]	scrollTop: $($.attr(this, 'href')).offset().top
JSLint (2)
1	'$' was used before it was defined.	$(document).on('click', 'a', function (event) {
2	Missing 'use strict' statement.	event.preventDefault();

Dodam tylko, że jeśli chodzi o JavaScript to jestem totalna noga i jeszcze nie zgłębiałem tajników tego jeżyka więc większość linijek kodu jest dla mnie niezrozumiała. Za pomoc poprawnym skonfigurowaniu scriptu z góry dzięki.

1 odpowiedź

odpowiedź 7 stycznia 2018 przez Comandeer Guru (600,730 p.)

To działa tylko po dołączeniu jQuery. Po drugie nie jest to najlepszy sposób, bo nie zmienia się adres po kliknięciu w link. https://codepen.io/Comandeer/pen/bEPbqg

komentarz 7 stycznia 2018 przez Dzemtenjem Bywalec (2,660 p.)

CSSowy smooth scroll chyba lepiej ustawić jedynie wtedy kiedy JS się nie wczyta, bo inaczej np. na firefoxie dostaniemy smooth scroll z CSS który będzie inny od tego z JS (moim zdaniem gorszy), więc traktowałbym go raczej jako ostateczność. Czy może coś pomyliłem?

Z całą resztą się jak najbardziej zgadzam.

komentarz 7 stycznia 2018 przez matir85 Bywalec (2,410 p.)

@Comandeer,

Mam podpięte jQuery.

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

To wytłumaczy mi ktoś jak zrobić tego smooth scrolla tak, żeby było dobrze. Tylko poproszę o wersje łopatologiczną. Pozdrawiam.

komentarz 7 stycznia 2018 przez Comandeer Guru (600,730 p.)

@Dzemtenjem czemu gorszy?

@matir85 a wstawiasz to na końcu body? Co rzuca konsola (F12)?

komentarz 7 stycznia 2018 przez Dzemtenjem Bywalec (2,660 p.)

Bo jest jedynie jedno tempo smooth scrolla z CSS (chyba, że da się to jakoś zmienić). W przypadku JS mozna to kontrolowac. Dlatego osobiście cssowy scroll uzywalbym tylko gdy JS się nie odpali.