Dfyjkt

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)