magento “单页结账”滚动到下一页屏幕底部

wfsdck30 于 2022-11-12 发布在其他

关注(0)|答案(4)|浏览(179)

在我的magento网站上，我得到了一个奇怪的行为在一个页面checkout，我想修复.基本上，在第二步，输入所有需要的数据后，我点击继续按钮，页面自动滚动到屏幕底部，所以，而不是看到航运选项，你看到页脚，必须向上滚动才能选择发货。所以我的问题是我如何才能让Onepagecheckout中的表单保持“聚焦”，以便当点击Continue/Next按钮时，屏幕停留在上面。我尝试过将shipping.saveonclick事件上的www.example.com（）函数更改为如下形式：

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（）;“），则第二个功能会自动移除。

magento

来源：https://stackoverflow.com/questions/20237227/one-page-checkout-scrolling-to-the-bottom-of-screen-on-next

4条答案

按热度按时间

0dxa2lsx1#

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

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

低于

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

希望这能有所帮助。

赞(0）回复(0）举报 2022-11-12

qv7cva1a2#

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

赞(0）回复(0）举报 2022-11-12

6xfqseft3#

除了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>

相同的结果，只是不编辑基本模板文件。*

赞(0）回复(0）举报 2022-11-12

bq9c1y664#

这也可以帮助，我只需在我的checkout.gotoSection中添加这段代码，它就运行得很好。

gotoSection: function (section) {
    section = $('#opc-' + section);
    section.addClass('allow');

    // added this line
    section.get(0).scrollIntoView();
},

赞(0）回复(0）举报 2022-11-12

我来回答

magento “单页结账”滚动到下一页屏幕底部

4条答案

相关问题

热门标签

最新问答