Question

我有以下HTML：

<a href="" id="category_button">Categories</a>

和这个功能：

$(function() {
var bar3 = $('footerSlideContainer_mobile');

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        bar3.stop().animate({ height: '250px' });
    } else {
        bar3.stop().animate({ height: '0px' });
    }
});
});

现在，当用户向下滚动时，将调用该函数。但我想在用户点击<a>标记时将其调用。我将不胜感激！谢谢你！

Answer 1

当您点击链接时，这应该调用javascript方法：

<a href="" onclick="jsfunction()" id="category_button">Categories</a>

<script>
function jsfunction(){
   var bar3 = $('footerSlideContainer_mobile');

   if($(window).scrollTop() > 300) {
     bar3.stop().animate({ height: '250px' });
   }else {
     bar3.stop().animate({ height: '0px' });
   }
}
</script>

Answer 2

$(function() {
    var bar3 = $('footerSlideContainer_mobile');

    $('#category_button').scroll(function() {
        if($(window).scrollTop() > 300) {
            bar3.stop().animate({ height: '250px' });
        } else {
            bar3.stop().animate({ height: '0px' });
        }
    });
});

Answer 3

您需要在锚链接的href中添加节哈希（＃）。这可以防止链接实际重定向到新URL（您正在欺骗锚链接以尝试滚动到同一页面中的其他位置）。这会在当前网址的末尾添加“＃”，但不会影响您的任何查询参数。

<a href="#" id="category_button">Category</href>

然后，只需将滚动功能包装在单击功能

中

$(document).on('click','#category_button',function(){
    var bar3 = $('footerSlideContainer_mobile');

    if($(window).scrollTop() > 300) {
        bar3.stop().animate({ height: '250px' });
    } else {
        bar3.stop().animate({ height: '0px' });
    }

});

使用<a href=""></a>执行JavaScript函数

3 个答案: