页内锚点在 Firefox 中不起作用

Question

我的页内锚标记有问题。当您单击向下箭头 <a href="#two"> 时，它应该向下滚动到 <div id="two">。它在 Chrome 和 Safari 中工作得很好，但 Firefox 根本没有将箭头注册为 link。

我已经尝试将 <div> 更改为 <a> 标签，将 <div id="two"> 替换为 <a name="two">，我似乎无法为我工作在 Firefox 中。

想法？

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    font-family: 'Helvetica Neue', serif;
    font-weight: lighter;
    letter-spacing: 1px;
}


.arrow {
    color: black;
    font-size: 5em;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

.arrow:hover {
    color: lightgray;
}

.button {
    background-color: transparent;
    border-color: transparent;
    margin-left: 50%;
    margin-right: 50%;
    margin-bottom: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>

<div>
<button class="button">
  <a href="#two">
    <span class="fontawesome-angle-down arrow"></span>
  </a>
</button>
</div>

<div id="two" class="section">
  <article class="fade relative">
    <div id="name">
      <a href="#">
        <a href="https://iamtrask.github.io/" target="_blank">
          <img src="http://placehold.it/350x150" alt="I Am Trask" />
        </a>
      </a>
      <h2 class="absolute-text art-title">I AM TRASK</h2>
      <div id="hidden" class="absolute-text">
        <p>• bullet 1<br>• bullet 2</p>
      </div>
    </div>
  </article>
</div>

Answer 1

只需删除 <button> 标记，在这种情况下它没有任何意义，因为您不需要按钮，而是图标。在以下代码片段中，我将您的 .button class 分配给了父级 div 并删除了按钮元素本身。

我还添加了这个来去掉箭头下方的下划线 link:

.button a {
  text-decoration: none;
}

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    font-family: 'Helvetica Neue', serif;
    font-weight: lighter;
    letter-spacing: 1px;
}


.arrow {
    color: black;
    font-size: 5em;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

.arrow:hover {
    color: lightgray;
}

.button {
    background-color: transparent;
    border-color: transparent;
    margin-left: 50%;
    margin-right: 50%;
    margin-bottom: 250px;
}
.button a {
  text-decoration: none;
}
#two {
  height: 800px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>

<div class="button">
  <a href="#two">
    <span class="fontawesome-angle-down arrow"></span>
  </a>
</div>

<div id="two" class="section">
  <article class="fade relative">
    <div id="name">
      <a href="#">
        <a href="https://iamtrask.github.io/" target="_blank">
          <img src="http://placehold.it/350x150" alt="I Am Trask" />
        </a>
      </a>
      <h2 class="absolute-text art-title">I AM TRASK</h2>
      <div id="hidden" class="absolute-text">
        <p>• bullet 1<br>• bullet 2</p>
      </div>
    </div>
  </article>
</div>

页内锚点在 Firefox 中不起作用

In-page anchor not working in Firefox

html

css

anchor

firefox

jquery