Question

我正在开发一个Web应用程序，其模拟页面现在可以在以下位置找到：our server

如果单击蓝色标题“step1”，然后选择“传递到地址”选项，则表单将显示使用jQuery ajax加载。没问题。单击“场地”单选按钮将带您到另一个表单，这也没问题。

如果你向下滚动一下，你可以看到一个textarea，你可以看到一个名为“这是什么？”的链接。点击它，textarea将填充样本字。

问题是，点击链接后，网页会自动滚动到顶部。我想要的是在点击链接后将textarea保持在屏幕中心。

我正在尝试使用名为“scrollTo”的jQuery插件，可以找到here

从我的演示页面我可以看出我想要的是什么。以下是我尝试使用它的代码：

function reloadDeliveryForm()
{
$('#deliveryForm').load('./ajax/deliveryToVenueForm.html', 
           function(response,     status, xhr) 
{
    if (status == "error") 
    {
        $.prompt("Sorry but there was an error, please try again.<br />" +
                 "If same error persists, please report to webmaster.");
    }
    else    //deliveryForm loaded successfully
    {
        validateDeliveryForm();
        $("#delivery_special").elastic();
        $('#special_conditions_tip').click(function()
        {
            console.log("start filling");
            fillTextareaWithExample();
            console.log("end filling");
            $.scrollTo('#delivery_special');
            console.log("end scrolling");
        });
    }
});

}

从Firebug输出我可以告诉scrollTo函数被调用，但不起作用。我已经将jQuery切换回版本1.3.2，该版本在插件的演示页面上使用，但这也无济于事。

我的编码有问题吗？您将使用哪种技术来解决此问题？

非常感谢任何建议。

Answer 1

约custom.js的第112行，更改此

$('#special_conditions_tip').click(function()
{
    console.log("start filling");
    fillTextareaWithExample();
    console.log("end filling");
    $.scrollTo('#delivery_special');
    console.log("end scrolling");
});

到这个

$('#special_conditions_tip').click(function(event)
{
    event.preventDefault();
    console.log("start filling");
    fillTextareaWithExample();
    console.log("end filling");
    $.scrollTo('#delivery_special');
    console.log("end scrolling");
});

.preventDefault（）可防止浏览器操作发生。

jQuery scrollTo插件将屏幕滚动到div不起作用，为什么？

1 个答案: