页内锚点在Firefox中不起作用

Question

I'm having issues with my in-page anchor tag. When you click the down arrow, <a href="#two"> , it should scroll down to the <div id="two"> . It's working just fine in Chrome & Safari, but Firefox doesn't register the arrow as a link at all.

I've tried changing the <div> to an <a> tag, replacing <div id="two"> with <a name="two"> , I can't seem to get anything to work for me in Firefox.

Thoughts?

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

Just remove that <button> tag, it makes no sense in this context, since you don't want a button, but an icon. in the following snippet I assigned your .button class to the parent div and removed the button element itself.

I also added this to get rid of the underline below the arrow 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>