頁內錨點在Firefox中不起作用

Question

我的頁內定位標記存在問題。 單擊向下箭頭<a href="#two"> ，它應向下滾動到<div id="two"> 。 在Chrome和Safari中它可以正常工作，但是Firefox根本沒有將箭頭注冊為鏈接。

我嘗試將<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類分配給了父div，並刪除了button元素本身。

我還添加了它，以消除箭頭鏈接下方的下划線：

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