Question

我在wordpress页面上使用scrollTo jQuery插件，并想知道是否有没有办法在每次点击“页面”按钮链接时阻止页面向下滚动？

http://www.missbee.se/missBeev1/?page_id=5#page1

这是我的代码，

$(function() {

var $target = $('#mask');
    $('#btn1').click(function() {
        $target.scrollTo($('#page1'),500);
        });
        $('#btn2').click(function() {
        $target.scrollTo($('#page2'),500);
        });
        $('#btn3').click(function() {
        $target.scrollTo($('#page3'),500);
        });
        $('#btn4').click(function() {
        $target.scrollTo($('#page4'),500);
        });
        $('#btn5').click(function() {
        $target.scrollTo($('#page5'),500);
        });

});

Answer 1

页面“跳转”的原因是您的链接实际上导航到单击时使用的ID。

要解决此问题，只需按以下步骤更改每个电话：

$('#btn1').click(function(e){
    e.preventDefault();
    $target.scrollTo($('#page1'),500);
});

传递给匿名函数的'e'是click事件本身。 e.preventDefault（）完全按照它在锡上所说的那样做...防止触发默认操作 - 在这种情况下导航到链接上指定的href。

顺便说一句，您可以将脚本压缩为一个函数，而不是为每个链接使用单独的函数，如下所示：

$('#nav a').click(function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    $target.scrollTo($(href),500);
});

这个函数可以处理所有链接，因为它从单击的链接中获取目标href，而不必为每个链接编写单独的函数。

希望有所帮助。

Answer 2

我建议您使用jQuery UI标签，以达到您想要达到的目的。有关示例和信息，请参阅http://jqueryui.com/demos/tabs/。

每次单击“页面”按钮链接时，是否阻止页面向下滚动？

2 个答案: