Vfrdtyky

I have a Rails application that uses a jQuery smooth scrolling function. The smooth scroll works for the navbar links, but not for the 'scroll down' arrow or 'back to top' arrow. I've tried adding a script tag to implement the behavior directly on the element, but no luck. Any recommendations are appreciated!

Here is the scroll function -

// 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

          };

        });

      }

    }

  });



  

Here is the block containing the down arrow. The parens with (some text here) are not in my actual code, I just changed it for S/O. -

<div class="typebox" style="min-height: 119px;">

	  <div id="typed-strings">

	  <h3 class="type-active"><strong style="font-size: 20px; line-height: 1.5em;"> (some text here) <br> (some more text here) &nbsp; <br><br><a href="#web-apps"><%= image_tag "down-arrow.png", class: "down-arrow"%></a></strong></h3>

	 </div> 

	 <span id="typed"></span>	

	 <br />

	</div>

I cannot find your code on the link, but seeing your website I can think of a few things:

1) your down arrow is not there when you set the click callback, it's added later with that typed effect so the click callback is not set on that A tag. I guess the library you used for that has some event to let you know that the effect is finished, then you can set the callback for that A tag

2) the back to top arrow has href="#" which is explicittly NOT selected for the click function with the line .not('[href="#"]'), I'm guessing you copied the function from somewhere else, you can add an id after the href for that back to top A tag and add an element wit that ID at the top of the site

EDIT: to fix the down arrow event listener, I would do this:

1st, move the function outside the parameters

function scroll_to_hash(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

        };

      });

    }

  }

}



// Select all links with hashes

$('a[href*="#"]')

  // Remove links that don't actually link to anything

  .not('[href="#"]')

  .not('[href="#0"]')

  .click(scroll_to_hash);

2nd, I'm guessing you are using Typed.js, you have an onComplete callback https://mattboldt.com/typed.js/docs/, you can then set the click event for the down arrow on that callback on the options when you initialize the plugin

onComplete: function(self) {

  $('a[href="#web-apps"]').click(scroll_to_hash)

}