JS: $('body').append(''); как создать элемент 1 раз при начале прокрутки?

Question

[Uno di Palermo]

Здравствуйте, господа. Как по скроллингу (вниз) создать элемент один раз?

Если добавить в нижеприведенный код строку animated bounce (animate.css)

$('body').append('<button class="btn_up animated bounce" />');

, то видно, что при прокрутке кнопка создается бесконечно

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) { //если прокрутили на 300 вниз
    $('body').append('<button class="btn_up" />'); 
  } 
  if ($(window).scrollTop() == 0) { //если прокрутили вверх до 0
    $('.btn_up').remove(); 
  }  
  $('.btn_up').click(function() {
    $('body, html').animate({'scrollTop': 0}, 500);
  });
});

Comments

[V Sh.]

А перед созданием проверять наличие кнопки не пробовали?

[Uno di Palermo]

V Sh., спс

[Uno di Palermo]

V Sh.,

$(window).scroll(function() {
  if (!$("button").is(".btn_up")) {
    $('body').append('<button class="btn_up animated bounce" />'); 
  } 
  else {
    //pass
  }

Answer 1

[Stalker_RED]

var btnCreated = false;
$(window).scroll(function() {
  if (!btnCreated) {
    // создаем кнопку
    // ...
    btnCreated = true; // и переключаем флаг
  }
});

Comments

[Uno di Palermo]

отлично, работает, но теперь по нажатию кнопки в самом верху просто зависает страница - никаких действий невозможно сделать

вот код: не подскажете?

var b = false;

$(window).scroll(function() {
  if (!b) {
    if ($(window).scrollTop() > 300) { //если прокрутили на 300 вниз
      $('body').append('<button class="btn_up animated bounce" />'); 
      b = true; 
    }
  };

  if ($(window).scrollTop() == 0) { //если прокрутили вверх до 0
    $('.btn_up').remove();
    b = false;   
  };  
  
  $('.btn_up').click(function() {
    $('body, html').animate({'scrollTop': 0}, 500);
  });
});

[Stalker_RED]

Олег Корнилов, в это условие if (!b) только создание кнопки поместите.

[Stalker_RED]

Олег Корнилов, а еще лучше не страдать с созданием/удалением кнопки, а просто скрывать ее и показывать.

[Uno di Palermo]

Stalker_RED, это вариант 5+, благодарствую

[Uno di Palermo]

Stalker_RED, решил взять hide()\show()

Answer 2

[Messi]

Проверяйте перед созданием length элемента и если 0, то создавайте.

Comments

[Uno di Palermo]

а так?

$(window).scroll(function() {
  if (!$("button").is(".btn_up")) {
    $('body').append('<button class="btn_up animated bounce" />'); 
  } 
  else {
    //pass
  }