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

【问题标题】：One Page Checkout scrolling to the bottom of screen on next下一页结帐滚动到屏幕底部
【发布时间】：2017-06-21 20:54:07
【问题描述】：

在我的 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();") 时，第二个函数就会自动删除。

【问题讨论】：

标签： javascript php html css magento

【解决方案1】：

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

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

下面

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

希望对您有所帮助。

【讨论】：

在 CE 1.9.1 中完美运行，具有 50 万个自定义功能。
@Willaim Tran：我有同样的问题并尝试了您的解决方案。它确实有效，但只成功了一半。这意味着，它有助于显示一半的运输方式块，而不是从运输方式块开始的地方完成。对此有什么想法吗？
@Willaim Tran：嘿，我只是在您的解决方案上尝试了更多，它对我来说效果很好。这是我在您的解决方案中添加的更多内容： checkout.gotoSection = function (section, reloadProgressBlock) { Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock); jQuery('html, body').animate({ scrollTop:jQuery('#opc-'+section).offset().top - 75 }, 500); };这有助于我将块放置到位。

【解决方案2】：

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

【讨论】：

谢谢，但这没有用。而且，使用jquery的点击功能禁用了按钮的onclick功能，这也很重要。

【解决方案3】：

除了Williams answer：

大多数自定义模板不会“重写”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>

结果相同，只是无需编辑基本模板文件。

【讨论】：