Animated scroll with JQuery

Question

How is it possible to make the text I am not clickable for some reason... (check the code below) clickable?

 var container = document.querySelector('.container'); var clickMe = document.querySelector('.clickMe'); clickMe.addEventListener('click', function() { var container = document.querySelector('.container'); $([document.documentElement, document.body]).animate({ scrollTop: $(".container").offset().top }, 1000); }); container.addEventListener('wheel', function() { var scrollY = window.scrollY; if (scrollY == 0) { $([document.documentElement, document.body]).animate({ scrollTop: $(".nextContainer").offset().top }, 800); } });

 .container { background: green; height: 100vh; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p class="clickMe">'wheel'</p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="nextContainer"> <p class="clickMe">I am not clickable for some reason...</p> </div>

As you see, the Wheel-listener works perfectly, while the click-listener does not. How do I solve this problem, if possible?

Thanks in advance.

Answer 1

The problem appear because you get only first clickable element here : var clickMe = document.querySelector('.clickMe');

So, you attach the click event just at first element "wheel" text. The solution to fix this problem is to get all ".clickMe" elements with querySelectorAll and attach click event to each element.

var clickMe = document.querySelectorAll('.clickMe'); 
clickMe[0].addEventListener('click', function() {
    var container = document.querySelector('.container');

    $([document.documentElement, document.body]).animate({
        scrollTop: $(container).offset().top
    }, 1000);
});
clickMe[1].addEventListener('click', function() {
    var container = document.querySelector('.container');

    $([document.documentElement, document.body]).animate({
        scrollTop: $(container).offset().top
    }, 1000);
});

Answer 2

Are you sure it's not clickable. In function which handle paragraph click add console.log("CLICKED"); and see in console if anything appears when you click. And in css add style for clickMe cursor:pointer; so when you hover it looks better.

Answer 3

Finally figured out the problem.

After the animation,

$([document.documentElement, document.body]).animate({
  scrollTop: $(".nextContainer").offset().top
}, 800);

I needed to add JQuery:s stop() function,

$('html, body').stop();

Credits: Stop ScrollTop function when user scrolls jquery

Answer 4

Instead of document.querySelector('.clickMe') you can use the jQuery Selector $('.clickMe') . Than it works fine.

 var container = document.querySelector('.container'); var clickMe = document.querySelector('.clickMe'); console.log(clickMe); $('.clickMe').on('click', function() { console.log('clicked'); var container = document.querySelector('.container'); $([document.documentElement, document.body]).animate({ scrollTop: $(".container").offset().top }, 1000); }); container.addEventListener('wheel', function() { var scrollY = window.scrollY; if (scrollY == 0) { $([document.documentElement, document.body]).animate({ scrollTop: $(".nextContainer").offset().top }, 800); } });

 .container { background: green; height: 100vh; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p class="clickMe">'wheel'</p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="nextContainer"> <p class="clickMe">I am not clickable for some reason...</p> </div>