javascript - 一页结帐滚动到下一页的屏幕底部

Question

在我的 magento 网站上，我在 onepagecheckout 中发现了一个奇怪的行为，我想修复它。基本上，在第 2 步，在输入所有需要的数据并点击继续按钮后，页面会自动向下滚动到屏幕底部，所以你看到的不是运送选项，而是页脚，必须向上滚动才能选择运费。所以我的问题是如何让 onepagecheckout 中的表单“聚焦”，以便在单击继续/下一步按钮时屏幕停留在它上面。我试过将 onclick 事件上的 shipping.save() 函数更改为如下内容:

function test() {
           shipping.save();
           document.getElementById('checkoutSteps').scrollIntoView();
}

但这显然行不通。那么如何设置点击next时页面停留在onepagecheckout呢？

对不起，我忘了添加，按钮已经有一个现有的点击事件。基本上，按钮看起来像这样:

<button type="button" class="button" title="<?php echo $this->__('Continue') ?>" onclick="shipping.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>

我不确定这是否重要，但每当我尝试添加第二个函数 onclick (onclick="shipping.save(); testFunction();") 时，第二个函数会自动删除。

Answer 1

我遇到了同样的问题。在您的 checkout/onepage.phtml 中，添加以下代码:

checkout.gotoSection = function (section, reloadProgressBlock) {
            Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock);
            $('opc-' + section).scrollTo();
        };

下面

var checkout = new Checkout(....);

希望这对您有所帮助。