javascript - Magento:结帐滚动到页面顶部

标签 javascript jquery html css magento

我们遇到一个问题,当下一步在单页结帐中加载时,页面没有滚动到顶部。

如果一个人在计费步骤中输入了所有数据并单击继续按钮,则下一步将在页面的一半处加载。基于上一步的最后一个位置。

我希望单页结帐中的每一步都从页面顶部开始。

我目前在 opcheckout.js 中得到了这个:

gotoSection: function(section)
{
    var sectionElement = $('opc-'+section);
    sectionElement.addClassName('allow');
    this.accordion.openSection('opc-'+section);
    this.reloadProgressBlock(section);
    jQuery("html, body").delay(10).animate({scrollTop: jQuery("#opc-"+section).offset().top }, 500);
},

但这并不能很好地工作,因为我们使用了固定的 header 。
那么我该如何解决这个问题,让它转到页面的绝对顶部呢?

最佳答案

已编辑

我使用的是 Magento 1.9.1.1,这是文件 skin/frontend/rwd/default/js/opcheckout_rwd.js 的内容:

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     rwd_default
 * @copyright   Copyright (c) 2006-2014 X.commerce, Inc. (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

Checkout.prototype.gotoSection = function (section, reloadProgressBlock) {
    // Adds class so that the page can be styled to only show the "Checkout Method" step
    if ((this.currentStep == 'login' || this.currentStep == 'billing') && section == 'billing') {
        $j('body').addClass('opc-has-progressed-from-login');
    }

    if (reloadProgressBlock) {
        this.reloadProgressBlock(this.currentStep);
    }
    this.currentStep = section;
    var sectionElement = $('opc-' + section);
    sectionElement.addClassName('allow');
    this.accordion.openSection('opc-' + section);

    // Scroll viewport to top of checkout steps for smaller viewports
    if (Modernizr.mq('(max-width: ' + bp.xsmall + 'px)')) {
        $j('html,body').animate({scrollTop: $j('#checkoutSteps').offset().top}, 800);
    }

    if (!reloadProgressBlock) {
        this.resetPreviousSteps();
    }
}

我没有遇到您描述的问题。所以我建议你更改包并使用 rwd (这应该是自 Magento 1.9.1 以来的基础包)。您可以从这个包开始构建一个新的主题。

关于javascript - Magento:结帐滚动到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30303862/

相关文章:

javascript - .insertBefore 每四次单击不执行任何操作

html - 单击后如何禁用按钮?

javascript - react this.setState 不是一个函数

javascript - 仅允许数字和数字之间的单个连字符

javascript - Selenium 网络驱动程序 : How to display values in console (Javascript)

jquery - 后台位置上的调用中心值失败

javascript - 为什么我在触发点击时遇到过多的递归?

jquery - $.getJSON、$.each 和变量范围

html - float div 内的 margin-top 和 margin-bottom 不起作用

javascript - 当按下浏览器停止按钮或 ESC 时停止 JS