Блог

 <script>

document.addEventListener
    ('DOMContentLoaded', 
    function() {
jQuery(function($){
$(document).scroll(function() 
    {
var y = $(this).scrollTop();
if (y > 1810 amp;amp; $(window
    ).scrollTop()   $(window
    ).height() < $(document
    ).height() - 100) {
$('#addcartsection').addClass
    ('viewaddcart')
} else {
$('#addcartsection'
    ).removeClass
    ('viewaddcart')
}
});
$('#addcartbutton').click
    (function(){
$('.single_add_to_cart_button'
    ).click();
$('html, body').animate({
scrollTop: $('.product_title'
    ).offset().top
}, 'slow');
});
});
});
</script>

<style>
#addcartsection{
position: fixed;
bottom: 0;
width: 100vw;
z-index: 98;
-webkit-transition: transform 
    0.34s ease;
transition : transform 0.34s
    ease;
transform: translateY(0px); /*adjust this value to the height of your addcartsection*/
}
.viewaddcart{
transform: translateY(0px
    )!important;
}
</style>
  

применил это в html-элементе page builder, но кнопка появляется всегда, а не после прокрутки определенного количества пикселей вниз по странице. есть ли какие-либо ошибки в скрипте? извините, я не эксперт в кодировании.

Кажется, работает, убедитесь, что вы скрываете его по умолчанию и отображаете только тогда, когда viewaddcart класс существует на той же кнопке:

 #addcartsection {
  ...
  display: none;
}

#addcartsection.viewaddcart {
  display: block;
}
  

 document.addEventListener('DOMContentLoaded',
  function() {
    jQuery(function($) {
      $(document).scroll(function() {
        var y = $(this).scrollTop();
        if (y > 1810 amp;amp; $(window).scrollTop()   $(window).height() < $(document).height() - 100) {
          $('#addcartsection').addClass('viewaddcart')
        } else {
          $('#addcartsection').removeClass('viewaddcart')
        }
      });
      $('#addcartbutton').click(function() {
        $('.single_add_to_cart_button').click();
        $('html, body').animate({
          scrollTop: $('.product_title').offset().top
        }, 'slow');
      });
    });
  });  

 #addcartsection {
  position: fixed;
  bottom: 0;
  width: 100vw;
  z-index: 98;
  -webkit-transition: transform 0.34s ease;
  transition: transform 0.34s ease;
  transform: translateY(0px);
  /*adjust this value to the height of your addcartsection*/
}

.viewaddcart {
  transform: translateY(0px)!important;
}

.veryHugeDocument {
  background: grey;
  height: 5000px;
}

#addcartsection {
  width: 100px;
  color: white;
  background: blue;
  right: 0;
  display: none;
}

#addcartsection.viewaddcart {
  display: block;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="veryHugeDocument">
  <h1>My document!</h1>
</div>
<button id="addcartsection">Add to cart!</button>