Как работает код скролла?

Question

[PlasterTom]

$(function() {$('body').on('click', 'a.scrollable', function(event) {
  var $anchor = $(this);
  $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
  event.preventDefault();
  });
});

Желательно разъяснение по строкам. В особенности не понятно это var $anchor = $(this);
и это $('html, body').stop().animate

Answer 1

[Алекс Глебов]

$(function() {$('body').on('click', 'a.scrollable', function(event) {
//так навешивается событие клика на ссылку, чтобы оно работало на созданных динамически элементах, которых еще нет на странице. Вместо боди может быть любой родитель, который будет на странице всегда.
  var $anchor = $(this); //this это элемент на котором сработало событие клика
  $('html, body').stop()//остановить все анимации
.animate( //эффект анимации
{scrollTop: //анимировать будем скролл
$($anchor.attr('href'))//берем атрибут href элемента, он же будет id блока, куда проскролить. $("#elem") - вот так получится
.offset().top //расстояние от начала страницы до элемента
},1500 //время анимации
,'easeInOutExpo'// динамика анимации
);
  event.preventDefault();  //отменить переход по ссылке браузером
  });
});

ссылки по теме
jquery.page2page.ru/index.php5/%D0%9F%D1%80%D0%B5%...
jquery.page2page.ru/index.php5/%D0%92%D1%8B%D0%BF%...
https://learn.javascript.ru/default-browser-action

Comments

[PlasterTom]

Не подскажите, почему перед энкор значок доллара стоит?

[PlasterTom]

Мечтаю об учебниках или сборниках кода вот с такими подробными разъяснениями) Спасибо

[Алекс Глебов]

Так принято называть переменные, которые содержат коллекции элементов
$elements = $(".elem");
$elements.enyFunction() и так далее
Ничего общего с пхп

Answer 2

[Sergiu Mitu]

тут вам основы js помог, ну прям очень, разъяснять тут по сути нечего...

var $anchor = $(this); в данном случае this это a.scrollable, используется он по сути ради получения значения атрибута href ссылки по которой кликнули.
stop(). Останавливает выполнение текущей анимации.
animate выполняет анимацию...

Comments

[PlasterTom]

Да я знаю основы js. Меня сбило с толку это stop(), так как вроде в примере не было анимаций для остановки. Не очень понимаю, зачем так делать. И что такое this знаю. А вот переменную c $ впервые вижу.

[Sergiu Mitu]

PlasterTom: переменные с $ пишутся в php , просто привычка тех людей что и на нём пишут, ничего более, в данном случае $ просто символ, он ничем не отличается от "a" или "b".

.stop() используется как перестраховка, к примеру если нажать быстро ссылку из примера пару раз то анимация будет производится все эти "пару раз", для избежания этого и используется stop

Выучить основы js, не было сказано в обиду, просто так быстрее все сами поймете. Ведь это действительно основы, особенно часть с символом $ .