CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hejha
Hejha

Reputation: 29

Animated scroll with JQuery

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.

Upvotes: 0

Views: 222

Answers (4)

mtw
mtw

Reputation: 81

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>

Upvotes: 0

Hejha
Hejha

Reputation: 29

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

Upvotes: 0

Adrian
Adrian

Reputation: 52

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);
});

Upvotes: 1

sirius
sirius

Reputation: 20

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.

Upvotes: 0

Related Questions