我们遇到一个问题,当下一步在单页结帐中加载时,页面没有滚动到顶部。
如果一个人在计费步骤中输入了所有数据并单击继续按钮,则下一步将在页面的一半处加载。基于上一步的最后一个位置。
我希望单页结帐中的每一步都从页面顶部开始。
我目前在 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/