1

我在 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);
        });

});
4

2 回答 2

2

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

要解决此问题，只需按如下方式更改每个调用：

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

传递给匿名函数的“e”是点击事件本身。e.preventDefault() 完全按照它在锡上所说的... 防止触发默认操作 - 在这种情况下，导航到链接上指定的 href。

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

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

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

希望有帮助。

于 2012-07-24T08:21:10.147 回答
0

我建议您使用 jQuery UI 选项卡来达到您想要达到的目的。有关示例和信息，请参见http://jqueryui.com/demos/tabs/。

于 2012-07-24T08:17:14.903 回答