无法单击锚链接

Question

我目前正在为一家本地企业设计这个网站，但遇到了一些我无法理解的问题。我有我编码的菜单栏，但我似乎无法 link "Contact Us"。我认为这可能是网站上的页面覆盖问题（因为我使用 overlay class 使幻灯片的照片变暗）但我更改了 z-index 以制作确保菜单栏位于所有内容之上。更奇怪的是，我所有其他 link 都在工作；这意味着我有 links 在网页本地（滚动到页面上特定位置的那些）并且它们都工作正常！

我梳理了我的代码，但我不确定我遗漏了什么，但我认为它必须是我遗漏的叠加层。

这是网页：RRCycleinc.com

这里是整个 'splash' 页面的代码，如果你不想经历使用 Google Inspect Element 的麻烦哈哈。

$(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>

错误来自 Javascript。

感谢对此事/我的代码的任何反馈！

Answer 1

Error is coming from this script

完全正确！

您应该只定位 a 标签选择器 href 以 #

开头

此代码应该有效

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

Answer 2

我觉得问题在http://rrcycleinc.com/js/smoothscroll.js

它不包含 href 属性是否有 '#' 请参考：

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

无法单击锚链接

Cannot click anchor links

html

css

href