页内锚点在Firefox中不起作用

Question

我的页内锚标记出现问题。当您点击向下箭头<a href="#two">时，它应向下滚动到<div id="two">。它在Chrome＆amp; amp;和Safari，但Firefox根本没有将箭头注册为链接。

我已尝试将<div>更改为<a>代码，将<div id="two">替换为<a name="two">，我似乎无法正常工作在我的Firefox中。

思想？

＆＃13;

＆＃13;

$(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;
      }
    }
  });
});

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需删除<button>标记，在此上下文中没有任何意义，因为您不需要按钮，而是图标。在下面的代码片段中，我将您的.button类分配给父div并删除了按钮元素。

我还添加了这个以摆脱箭头链接下方的下划线：

.button a {
  text-decoration: none;
}

＆＃13;

＆＃13;

$(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;
      }
    }
  });
});

＆＃13;

@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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;