Smooth Scroll generating :active attribute on target div

I am using a jQuery scroller to scroll to a certain element on the page. In this case it is the Navbar. However I am experiencing a strange issue. After clicking the button to scroll to the element the resulting element generates a focus attribute as so.

This disappears and reappears when I click and unclick the element. It only occurs after I click the button to scroll to this location. I have tried target the div with a focus tag and declaring it .navbar:focus { box-shadow: none;} but it doesn’t work

I am using the following to generate the scroll effect and am targeting the element by
<a href="#navigationtop" class="anchorLink">

jQuery(function($) {

  var scrollElement = 'html, body';
 $('html, body').each(function () {
  var initScrollTop = $(this).attr('scrollTop');
  $(this).attr('scrollTop', initScrollTop + 1);
   if ($(this).attr('scrollTop') == initScrollTop + 1) {
  scrollElement = this.nodeName.toLowerCase();
  $(this).attr('scrollTop', initScrollTop);
  return false;
    }    
   });

  // Smooth scrolling for internal links
  $("a[href^='#']").click(function(event) {
  event.preventDefault();

var $this = $(this),
target = this.hash,
$target = $(target);

$(scrollElement).stop().animate({
  'scrollTop': $target.offset().top
}, 500, 'swing', function() {
  window.location.hash = target;
});

});

});