jQuery平滑滾動，可鏈接到許多錨點

Question

我有一個動態創建的鏈接列表，所有鏈接都應轉到頁面底部的一個錨點。 然后，腳本打開第四個jQuery子選項卡。 我的行為確實很奇怪，如果有人可以幫助我，我會喜歡的。 這是代碼。

<html>
<a id="editRPTab" href="#editpowerrp">Edit RP</a>
<a id="editRPTab" href="#editpowerrp">Edit RP</a>
<a id="editRPTab" href="#editpowerrp">Edit RP</a>
...lots of these...

<a name="editpowerrp" id="editpowerrp" class="editpowerrp"></a> 
</html>

<script type="text/javascript">
$('#editRPTab').click(function(){
    $(document.body).animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 2000);
    $( "#subtabs" ).tabs({ active: 4 });
});
</script>

所以這就是它在做什么。

頁面加載后，除第一個鏈接外，其他鏈接均不起作用。

第一次單擊第一次時，屏幕閃爍，但沒有任何滾動或其他任何顯示。 該頁面位於頂部。

我第二次單擊第一次，它按您的期望向下滾動到錨點（每個js代碼）。

然后，所有其他鏈接開始工作，但立即將頁面移至錨點，並且不滾動。 僅第一個鏈接向下滾動。 您可以一次又一次單擊以使其滾動。

我在Chrome和Firefox中都看到了類似的行為，盡管在Firefox中它不會滾動。 但是，在第二個單擊第一個鏈接時，它會跳下，其他鏈接開始起作用。

真奇怪 我正在盡可能快地學習這些東西，但是這件事讓我感到困惑。 請讓我知道發生了什么，如果您對如何解決此問題有任何建議。

Answer 1

HTML代碼：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>


<a class="editRPTab" href="#editpowerrp">Edit RP</a>
<a class="editRPTab" href="#editpowerrp">Edit RP</a>
<a class="editRPTab" href="#editpowerrp">Edit RP</a>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<a name="editpowerrp" id="editpowerrp" class="editpowerrp">test</a>

JS：

$(function() {

    $(document).on('click', '.editRPTab', function(e) {

        e.preventDefault();

         $("html, body").animate({ scrollTop: $($(this).attr('href')).offset().top }, 2000);

    });

});

這對我行得通。 您遇到了幾個問題。

首先，如果您的元素是動態添加的，則必須委派它們的事件處理程序，以便其工作而不必每次都重新設置處理程序。

同樣，唯一的ID只能分配給一個元素。 因此，我將錨標記更改為使用類。

試試看。

Answer 2

感謝羅比的想法。 您的代碼工作不充分，但是我可以使用您的建議來修改我的代碼。 現在看來運作良好。

HTML

<a class="editRPTab" href="#editpowerrp">Edit RP</a>
<a class="editRPTab" href="#editpowerrp">Edit RP</a>
<a class="editRPTab" href="#editpowerrp">Edit RP</a>

JS

$('.editRPTab').click(function(){
    $(document.body).animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 2000);
    $( "#subtabs" ).tabs({ active: 4 });
});

看來關鍵是使用類選擇器而不是id / name。 因此，我將id更改為class，然后將js函數中的選擇器更改為class而不是id。

謝謝！

jQuery平滑滾動，可鏈接到許多錨點

問題描述

2 個解決方案

解決方案1
1 2014-07-28 02:29:18

解決方案2
0 已采納 2014-07-28 19:30:40

jQuery平滑滾動，可鏈接到許多錨點

問題描述

2 個解決方案

解決方案1 1 2014-07-28 02:29:18

解決方案2 0 已采納 2014-07-28 19:30:40

解決方案1
1 2014-07-28 02:29:18

解決方案2
0 已采納 2014-07-28 19:30:40