JQuery.animate（）：使用JQuery的HTML5動畫

Question

我在JQuery 2上有一個帶有高度動畫的頁面。但是隨后單擊元素，我看不到它，因為頁面瞬間滾動到頁面頂部。 我有下一頁：

<a href="#" class="infoSlider" id="sl00013" onClick="onSliderClick('match0013', 'sl00013')"></a>

JavaScript代碼是：

function onSliderClick(divId, slId) {

        var h1 = $( "div.bet .header" ).outerHeight(); 
        var h2 = $( "div.bet .line" ).outerHeight();
        var h = h1 + h2*4;

        $( "#" + divId ).animate({

                height: h
              }, 400, function() {
                    document.getElementById(slId).onclick = function() { onSliderClick_Up(divId, slId);};
        });

    }

    function onSliderClick_Up(divId, slId) {

        var h1 = $( "div.bet .header" ).outerHeight(); 
        var h2 = $( "div.bet .line" ).outerHeight();
        var h = h1 + h2;

        $( "#" + divId ).animate({
                height: h
              }, 400, function() {
                        document.getElementById(slId).onclick = function() { onSliderClick(divId, slId);};
        });

    }

為什么滾動到頂部？ 以及我如何解決這個問題。

Answer 1

選擇以下任何一個：

1. 刪除href屬性：
2. 從事件處理程序返回false
3. 提到@Kos時，調用event.preventDefault()

沒有評論為什么使用on*屬性

Answer 2

它滾動到頂部，因為其中有href=# 。 如果是href="http://google.com"或類似的名稱，瀏覽器將轉到該位置。

將事件處理程序附加到elt.on('click', function(event) {...})並調用event.preventDefault()以防止鏈接表現出正常現象。

Answer 3

您需要通過執行以下操作來防止使用默認的href：

$('.infoSlider').on('click',function(e){
    e.preventDefault();
});