Как можно объяснить пример кода?

Question

[Григорий]

Здравствуйте, пользователи ресурса! Пожалуйста, не могли бы объяснить (информативный комментарий) мне каждую строчку этого небольшого кода? Буду благодарен.

$(function(){
  $(window).scroll(function(){
    var scrolled = $(window).scrollTop();
    if (scrolled > 200) $('.go-top').fadeIn('slow');
    if (scrolled < 200) $('.go-top').fadeOut('slow');
  });
   
  $('.go-top').click(function () {
    $("html, body").animate({ scrollTop: "0" },200);
  });
});

Answer 1

[Mikhail Osher]

// функция, которая выполнится по событию DOMReady
$(function(){
  // обработчик события 'scroll' у объекта window, проще говоря - при скролле страницы
  $(window).scroll(function(){
    // смещение относительно начала (верха) страницы. по идее в пикселях
    var scrolled = $(window).scrollTop();
    // $('.go-top') - выбрать элементы с классом go-top, .fadeIn('slow') - показать их, медленно
    if (scrolled > 200) $('.go-top').fadeIn('slow');
    if (scrolled < 200) $('.go-top').fadeOut('slow'); // либо скрыть, соответственно
  });
   
  // обработчик события 'click' у объектов с классом go-top
  $('.go-top').click(function () {
    // Никогда не понимал зачем оба селектора, выбирает элементы html и body
   // Выставляет им свойство scrollTop в 0, то есть в начало (верх) страницы с временем выполнения 200мс
    $("html, body").animate({ scrollTop: "0" },200);
  });
});

Поправьте, если где-то ошибся.

Comments

[Григорий]

Большое спасибо!

[dake1231]

Действительно, зачем два селектора =)

[Антон]

При этом класс .go-top скорее всего назначен квадратной кнопке "вверх", которая то появляется - дабы пользователь поскроллил вверх, то пропадает - скроллить вверх некуда

Answer 2

[Codebaker]

$(function(){ // используется jquery: после того, как документ будет загружен
$(window).scroll(function(){ // на всё окно приложения вешается обработчик на событие scroll
var scrolled = $(window).scrollTop(); // получаем текущую координату бегунка скролла
if (scrolled > 200) $('.go-top').fadeIn('slow'); // если она более 200, то медленно показываем элементы .go-top (они плавно возникнут на странице, скорее всего это одна кнопка "вверх")
if (scrolled < 200) $('.go-top').fadeOut('slow'); // если меньше - также плавно скрываем .go-top
});

$('.go-top').click(function () { // при клике в элемент класса .go-top
$("html, body").animate({ scrollTop: "0" },200); // плавно скроллим документ вверх до координаты "ноль"
});
});

Comments

[Григорий]

Ваш вариант тоже прост для понимания, но пометить решение можно для одного ответа. Спасибо!

[cheerfulatlas]

@grigor7 простите за оффтоп, но можно и для двух, попробуйте

[Григорий]

@cheerfulatlas, точно!

Answer 3

[Николай Елисеев]

Общий коммент такой:
Скрипт, Ваш, делает следующее, как только скроллинг страницы ушел ниже 200px - появляется кнопка, по нажатию на которую происходит "промотка" страницы к начал.

$(function(){ // "Упаковываем" - вызываем после загрузки страницы 

  $(window).scroll(function(){ // Привязываем событие к скроллу окна
    var scrolled = $(window).scrollTop();  // Узнаем величину, на которую ушел скролл
    if (scrolled > 200) $('.go-top').fadeIn('slow');  // Если эта величина больше 200px - показываем кнопку
    if (scrolled < 200) $('.go-top').fadeOut('slow');   // Если эта величина меньше 200px - убираем кнопку
  });
   
  $('.go-top').click(function () {  // "Вешаем" событие на клик кнопки
    $("html, body").animate({ scrollTop: "0" },200);  // "Мотаем" в начало страницы
  });
});

Comments

[Григорий]

Еще такой глупый вопрос: вторая строчка, слово функция есть. Это функция или не функция? Судя по всему нет, если ее даже вызывать не надо.

[cexaxapu]

Это анонимная функция.