FadeIn кнопки наверх Fullpage

Question

Я очень слаб в javascript, только начал изучать. Использую fullpage js. Есть кнопка наверх, которая ссылается на первую секцию. Как сделать появление этой кнопки на всех секциях кроме первой?

<div id="fullpage" >
   <section class="section" id="section0" data-anchor="news">
   </section>
   <section class="section" data-anchor="about">
   </section>
   <section class="section" data-anchor="customer">
   </section>
</div>

<div class="row fixed-bottom justify-content-center">
  <a id="buttonUp" class="btn btn-info btn-sm col-lg-2" href="#news" role="button">Наверх</a>
</div>

Answer 1

Нашел в интернете решение, вот твой кусочег:

window.addEventListener('scroll', ()=>{
    arrowTop.hidden = (pageYOffset < document.documentElement.clientHeight);
});

Вместо document.documentElement.clientHeight, можешь взять высоту блока 1

(Ответ адаптивный для твоего и других сайтов, сам я библиотекой твоей не пользовался, но возможно в ней есть готовое решение)

Answer 2

Вот вам готовое решение.

Использовалось, кстати, буквально час назад здесь. Вот что значит даже и конкретный подробно расписанный вопрос не всегда даёт нужные результаты.

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
  if ($('#one').isInViewport()) {
    $('#up').hide();
  } else {
    $('#up').show();
  }
});

* {margin: 0; padding: 0;}

section {height: 150vh;}
#one {background: aquamarine;}
#two {background: chocolate;}
#three {background: coral;}

#up {
  display: none;
  position: fixed; bottom: 0; right: 0;
  background-color: red; color: white;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
<a href="#one" id="up">наверх</a>

Answer 3

На гите fullpage в документации есть список обратных вызовов.

<!-- Инициализация плагина fullpage перед закрывающим тегом body-->
<script type="text/javascript">
(function($) {
  $('#fullpage').fullpage({
    //опции фуллпейдж
    //После загрузки и создании структуры 
    afterRender: function(){
            $('#buttonUp').hide();
        },
        //После покидания секции
    onLeave: function(origin, destination, direction){
        var leavingSection = this;

          //Если индекс секции 0 и скролл вниз
          if(origin.index == 0 && direction =='down'){
            $('#buttonUp').show();
          }
          //Если индекс секции 1 и скролл наверх
        else if (origin.index == 1 && direction =='up') {
            $('#buttonUp').hide();
        }
        }

        });
    })(jQuery);
</script>

БЛОГ НА HUSL

FadeIn кнопки наверх Fullpage

Ответы (3 шт):