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

Question

在我的magento网站上，我在onepagecheckout中得到一个奇怪的行为，我想修复。 基本上，在第2步，输入所需的所有数据后，我点击继续按钮，页面自动向下滚动到屏幕的底部，所以你看到页脚而不必看到页脚，必须向上滚动才能选择运费。 所以我的问题是如何将表单保持在onepagecheckout中“聚焦”，以便在单击“继续/下一步”按钮时屏幕保持不变。 我已经尝试将onclick事件上的shipping.save（）函数更改为：

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

但这显然不起作用。 那么如何在单击下一个页面时将页面设置为保持在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(....);

希望这有帮助。

Answer 2

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Answer 3

除了威廉姆斯回答 ：

大多数自定义模板都不会“重写” base/default/template/checkout/onepage.phtml因此将此文件复制到模板只是为了添加这个...

您仍然可以使用此功能添加新模板文件：

对于模板布局local.xml添加：

<checkout_onepage_index>
    <reference name="before_body_end">
        <block type="core/template" name="checkout.scroll" as="checkout.scroll">
            <action method="setTemplate">
                <template>checkout/onepage/scroll.phtml</template>
            </action>
        </block>
    </reference>
</checkout_onepage_index>

使用此内容创建.../template/checkout/onepage/scroll.phtml ：

<script type="text/javascript">
//<![CDATA[
    document.observe("dom:loaded", function() {
        if (typeof checkout !== 'undefined') {
            checkout.gotoSection = function (section, reloadProgressBlock) {
                Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock);
                $('opc-' + section).scrollTo();
            };
        }
    });
//]]>
</script>

同样的结果，只是没有编辑基本模板文件。