Cannot click anchor links

Question

I'm designing this website at the moment for a local business and I've hit a bit of a brick wall that I can't figure out. I have the menu bar that I coded but I can't seem to link the "Contact Us". I figured that maybe it was an issue with the page overlay on the site (because I'm using an overlay class to darken the photos that slide) but I changed the z-index to make sure that the menubar sat on top of everything. What's even stranger is that all my other links work; meaning that I have links are local to the webpage (ones that scroll to specific places on page) and they all work fine!

I've combed through my code but I'm not sure what I'm missing, but I would assume it would have to be something with the overlay that I'm missing.

Here's the webpage: RRCycleinc.com

And here is my code for the whole 'splash' page, if you don't want to go through the trouble of using Google Inspect Element haha.

$(document).on('click', 'a', function(event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
});

.menubar {
  position: absolute;
  z-index: 150;
}

.menubar ul,
li,
a {
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 10px;
  z-index: 1000;
}

.menubar a:hover {
  text-decoration: underline;
}

.menubar.two a {
  color: black;
}

.slider-contain {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.a-slide {
  background-size: cover !important;
}

.slick-slider {
  height: 100%;
  width: 100%;
  z-index: -1;
}

.slick-list,
.slick-track {
  height: 100%;
}

.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 101;
  background: rgba(0, 0, 0, 0.6);
}

.overlay p {
  color: white;
  position: absolute;
  font-size: 30px;
  width: auto;
  top: 85%;
  font-family: 'Caveat', cursive;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.overlay h3 {
  font-size: 55px;
  color: white;
  width: auto;
  top: 40%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.overlay h2 {
  font-size: 30px;
  color: white;
  width: auto;
  top: 90%;
  position: absolute;
  font-family: 'Caveat', cursive;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Start Menu -->
<div class="menubar">
  <a href="#" class="logo"></a>
  <ul class="mainmenu">
    <li><a style="color:goldenrod;" href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Part Catalogs</a></li>
    <li><a href="http://google.com">Contact / Hours</a></li>
  </ul>
</div>
<!-- Splash Page Slider + Overlay info -->
<div class="slider-contain">
  <div class="overlay">
    <!--<img id="logo" align="right" src="img/logo.png" alt=""> (Logo For Later Use)-->
    <h3>R&R Cycle Inc.</h3>
    <p>Service and Repair for All Makes and Models Since 1979!</p>
    <h2>Call Us Today: 845-336-5910</h2> </div>
  <div class="slick-slider">
    <div class="a-slide" style="background: url('img/slider-4.jpeg') no-repeat center center"></div>
    <div class="a-slide" style="background: url('img/slider-2.jpeg') no-repeat center center"></div>
    <div class="a-slide" style="background: url('img/slider-3.jpeg') no-repeat center center"></div>
    <div class="a-slide" style="background: url('img/slider-5.jpg') no-repeat center center"></div>
    <div class="a-slide" style="background: url('img/sunset-summer-motorcycle.jpg') no-repeat center center"></div>
  </div>
</div>

Error comes from Javascript.

Appreciate any feedback on the matter / on my code!

Answer 1

i think the problem in http://rrcycleinc.com/js/smoothscroll.js

it not contain if a href attribute have a '#' or not please refer to this :

https://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 2

Error is coming from this script

Exactly!

You should target only a tag selector have href start by #

This code should work

$(document).on('click', 'a[href*="#"]', function (event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
});