Question

我正在为当地企业设计这个网站，而且我已经碰到了一些我无法弄清楚的砖墙。我有我编码的菜单栏但我似乎无法链接“联系我们”。我想这可能是网站上的页面覆盖问题（因为我使用overlay类来使幻灯片变暗）但我更改了z-index以确保菜单栏坐在一切之上。更奇怪的是，我所有的其他链接都有效;这意味着我有链接是本地的网页（滚动到页面上的特定位置的链接），他们都工作正常！

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

以下是网页：RRCycleinc.com

如果您不想轻易使用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

错误来自此脚本

完全！

您应该只定位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属性具有＆＃39;＃＆＃39;或不参考：

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

无法点击锚链接

2 个答案: