Add Active Class when Scrolling and Clicking

Question

I hope someone will be able to help me with my code, I want to add the active class when scrolling not just by clicking. How can I do that on my code. I'm not good at javascript or jquery. Thank you so much

jQuery(document).ready(function($) {

  //you can now use $ as your jQuery object.
  $('div p').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  })

  // Select all links with hashes
  $('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
      // On-page links
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
        location.hostname == this.hostname
      ) {
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        // Does a scroll target exist?
        if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000, function() {
            // Callback after animation
            // Must change focus!
            var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) { // Checking if the target was focused
              return false;
            } else {
              $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
              $target.focus(); // Set focus again
            };
          });
        }
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="article-links">
  <p class="active"><a href="#link-one">US Dollar rates and purchasing power are in all time low</a></p>
  <p><a href="#link-two">Huge institutional interest</a></p>
  <p><a href="#link-three">Strong fundamental growth and usage on overall blockchain ecosystem</a></p>
</div>

Your code is working. What are you expecting? – Matt Jun 30 '21 at 03:15 — Matt, Jun 30 '21 at 03:15

score 0 · Answer 1 · answered Jun 30 '21 at 03:19

Your code works. It might be more obvious with a noticeable change. I've styled the active class to increase font-size.

jQuery(document).ready(function($) {

  //you can now use $ as your jQuery object.
  $('div p').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  })

  // Select all links with hashes
  $('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
      // On-page links
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
        location.hostname == this.hostname
      ) {
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        // Does a scroll target exist?
        if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000, function() {
            // Callback after animation
            // Must change focus!
            var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) { // Checking if the target was focused
              return false;
            } else {
              $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
              $target.focus(); // Set focus again
            };
          });
        }
      }
    });
});

.active {
font-size: 24px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="article-links">
  <p class="active"><a href="#link-one">US Dollar rates and purchasing power are in all time low</a></p>
  <p><a href="#link-two">Huge institutional interest</a></p>
  <p><a href="#link-three">Strong fundamental growth and usage on overall blockchain ecosystem</a></p>
</div>

Yup, but I need not just by clicking, I need the active class to scrolling too — DevDietheR, Jun 30 '21 at 03:52
okay, I re-read your question, that makes more sense. It gets complicated quickly. See this post for more details. https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery — Matt, Jun 30 '21 at 14:46

Add Active Class when Scrolling and Clicking

1 Answers1