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

选择以下任何一项：

删除href属性：
从您的事件处理程序返回false
将event.preventDefault()称为@Kos提及

不对您使用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();
});

JQuery.animate（）：使用JQuery的HTML5动画

3 个答案: