Scroller сайта

@Виктор_Лащенко · Регистрация: 28.12.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте! Кто подскажет, почему не правильно работает прокрутка по нажатию на кнопку (jQuery), написал такой код,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){   
    $('#up').click(function () {
        var posTop= $("body").scrollTop();
        $('body,html').animate({scrollTop: 0}, 550);
    $(".scroll").replaceWith("<div class="scroll" id="down"><p>↓</p></div>");
        $('#down').click(function () {
        $('body,html').animate({scrollTop: posTop}, 550);
        $(".scroll").replaceWith("<div class="scroll" id="up"><p>↑</p></div>");
        });
    });
});

но такая прокрутка срабатывает только 1 раз, нажимаю на кнопку вверх, оно прокручивает, потом появляется кнопка вниз, нажимаю, оно прокручивает, а если после этого нажать еще раз вверх, уже не прокручивает, крутил этот код как мог, но ничего не придумал, срабатывает все равно 1 раз или с очень большой задержкой крутит. Подскажите пожалуйста кто знает в чем проблема. Нужно что б было, (типа как вк)

@AmateR62 · 28.12.2015, 15:25

А html код кнопки какой?

@Виктор_Лащенко · 28.12.2015, 15:31 **[ТС]**

Ну как какой, в коде ж видно,

JavaScript
1
<div class="scroll" id="up"><p>в†‘</p></div>

..ну да описался не кнопки а div

@AmateR62 · 28.12.2015, 15:55

Ну мало ли что у вас в html...
jQuery работает с элементами, которые были на странице на момент инициализации кода, поэтому полностью переписывать код кнопки не совсем правильно. Меняйте текст (изображение) в кнопке, а событие обрабатывайте одно, например для класса scroll.
Ниже накидал пример - нажали кнопку, проверили если есть элемент с классом up, то удаляем у него класс up, и пишем класс down, потом наоборот...

HTML5
1
<div class="scroll up"><p>в†‘</p></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  $('.scroll').click(function() {
    if ($('.scroll').hasClass('up')) {
      posTop = $("body").scrollTop();
      $('body, html').animate({scrollTop: 0}, 550);
      $(".scroll").html("<p>в†“</p>");
      $(".scroll").removeClass('up');
      $(".scroll").addClass('down');
    } else {
      $(".scroll").html("<p>в†‘</p>");
      $('body, html').animate({scrollTop: posTop}, 550);
      $(".scroll").removeClass('down');
      $(".scroll").addClass('up');
    }
  });

@Виктор_Лащенко · 28.12.2015, 16:09 **[ТС]**

Спасибо, вот только .hasClass определяет как бы наличие класса, а у меня не класс а id, а класс у меня неизменный - scroll, есть ли подобная какая то функция только для id элемента?

@AmateR62 · 28.12.2015, 16:13

А чем вам класс не угодил?))) Я просто ваш id перенес в класс. А так можно использовать $("div").is("#up")...

@Виктор_Лащенко · 28.12.2015, 16:16 **[ТС]**

А разве можно использовать сразу 2 класса в 1 элементе, или я что то не недопонимаю?)

@AmateR62 · 28.12.2015, 16:17

Классы то? Хоть 10)) А вот id только 1 ))

@Виктор_Лащенко · 28.12.2015, 17:15 **[ТС]**

Спасибо, за помощь, все понял)

@AmateR62 · 28.12.2015, 17:20

Как раз классы для того и нужны чтобы написал 1 раз и применил сразу к нескольким элементам. Да и в чем тут путаться css будет?)

CSS
1
2
3
4
5
6
7
.scroll.up {
набор стилей
}
 
.scroll.down {
набор стилей
}

У вас можно вообще не использовать класс down - просто удаляем или присваиваем класс up... да вариантов много, все зависит от потребности.

@Виктор_Лащенко · 28.12.2015, 17:24 **[ТС]**

да, все верно)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	28.12.2015, 15:25
	А html код кнопки какой? 0

@Виктор_Лащенко 1 / 1 / 1 Регистрация: 28.12.2015 Сообщений: 44
	28.12.2015, 16:09 [ТС]
	Спасибо, вот только .hasClass определяет как бы наличие класса, а у меня не класс а id, а класс у меня неизменный - scroll, есть ли подобная какая то функция только для id элемента? 0

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	28.12.2015, 16:13
	А чем вам класс не угодил?))) Я просто ваш id перенес в класс. А так можно использовать $("div").is("#up")... 0

@Виктор_Лащенко 1 / 1 / 1 Регистрация: 28.12.2015 Сообщений: 44
	28.12.2015, 16:16 [ТС]
	А разве можно использовать сразу 2 класса в 1 элементе, или я что то не недопонимаю?) 0

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	28.12.2015, 16:17
	Классы то? Хоть 10)) А вот id только 1 )) 0

@Виктор_Лащенко 1 / 1 / 1 Регистрация: 28.12.2015 Сообщений: 44
	28.12.2015, 17:15 [ТС]
	Спасибо, за помощь, все понял) 0

@Виктор_Лащенко 1 / 1 / 1 Регистрация: 28.12.2015 Сообщений: 44
	28.12.2015, 17:24 [ТС]
	да, все верно) 0

Scroller сайта

Решение