我的wordpress网站(http://www.libertadtravel.com)上有一个固定的标题,因此当使用锚链接时,锚点会隐藏在标题后面。不用担心 - 我用以下内容解决了这个问题:
:target:before {
content: "";
display: block;
height: 156px;
margin-top: -156px;
}
我的问题是这对结账时内置的woocommerce功能没有影响。尝试付款时出现错误,页面向上滚动以显示错误 - 除了它隐藏在标题后面。我没有运气就尝试了以下内容:
.woocommerce-error:before {
content: "";
display: block;
height: 156px;
margin-top: -156px;
}
我猜woocommerce没有使用传统的锚点?任何想法我如何使这个功能,以便错误在标题下面可见?感谢。
答案 0 :(得分:0)
固定。我找到了woocommerce用于在woocommerce / assets / js / frontend / checkout.min.js中滚动到页面顶部的JQuery函数。我将下面两个(两个)条目的偏移量更改为我的标题高度(加上10-15):
// Scroll to top
$( 'html, body' ).animate({
scrollTop: ( $( 'form.checkout' ).offset().top - 100 )
}, 1000 );
然后我将其复制到一个新的.js文件中,并通过我的functions.php将其排入以下内容:
// Use my own Woocommerce checkout js to correct scroll-to-top height
add_action('wp_enqueue_scripts', 'override_wc_checkout_script');
function override_wc_checkout_script() {
wp_deregister_script('wc-checkout');
wp_enqueue_script('wc-checkout', get_stylesheet_directory_uri() . '/woocommerce/js/checkout.js', array('jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n'), null, true);
}
答案 1 :(得分:0)
您实际上可以通过在自己排队的JS文件中执行此操作来覆盖WooCommerce全局函数:
// Common scroll to element code.
$.scroll_to_notices = function(scrollElement) {
if(scrollElement.length) {
$('html, body').animate({
scrollTop: (scrollElement.offset().top - 200)
}, 300);
}
};
答案 2 :(得分:0)
在结帐时解决此问题的另一种方法是添加此 CSS 以偏移锚点的位置。将这两个值设置为所需的偏移量。只需将其添加到您的主 css 文件中即可。
.woocommerce-NoticeGroup-updateOrderReview, .woocommerce-NoticeGroup-checkout{
margin-top: -200px;
padding-top: 200px;
}