我制作了一个简单的WordPress网站, 主题为OneEngine。
这是一个演示链接:https://oneengine.enginethemes.com/
有趣的是, 在Chrome中, 导航似乎无法正常工作。
我已经查明了负责滚动的那段脚本。
// SCROLL TO
$('#main-menu-top a, ul.slicknav_nav li a').click(function(event){
event.stopPropagation();
event.preventDefault();
console.log('Click event');
if($(this).hasClass('active'))
return;
$('#main-menu-top a').removeClass('active').css('border-bottom-color', 'none');
$('ul.slicknav_nav li a').removeClass('active');
$(this).addClass('active');
if(this.hash == "#home")
$.scrollTo(0, 800);
else
$.scrollTo( this.hash, 800, {offset:-$(".sticky-wrapper").height()});
var bgcolor = $(this.hash).find('span.line-title').css('backgroundColor');
$(this).css('border-bottom-color', bgcolor);
$('.slicknav_nav').hide('normal', function() {$(this).addClass('slicknav_hidden');
});
$('a.slicknav_btn').removeClass('slicknav_open').addClass('slicknav_collapsed');
return false;
});
$("a#scroll_to").click(function(event) {
$.scrollTo("#header", 800);
});
我有信心那不起作用的部分是$ .scrollTo(); 。将其输入Google会产生window.scrollTo, 因此我将每个实例都更改为window.scrollTo(), 但这会产生没有偏移量的跳跃锚。
我知道的本节偏移量:-$(“ 。sticky-wrapper” )。height()大致类似于:
var stickyWrapperHeight = $(“ 。sticky-wrapper” )。height()(76像素)。
我实际上找不到所描述的本机scrollTo方法, 因此我认为它实际上可能是JQuery scrollTo-https://github.com/flesler/jquery.scrollTo
我最大的问题是为什么这在Chrome中不起作用?
我看到了潜在的替代方法, 例如:
$("a").on('click', function(event) {console.log($(".sticky-wrapper").height())var height = $(".sticky-wrapper").height();
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
我只是使用过时的scrollTo()版本吗?
#1即使他们在演示页面上遇到SSL问题, 并且如果你不键入jQuery()而是得到” $” 也不是函数。我注意到, 即使你尝试在控制台中直接使用该插件, 它仍然无法正常工作。
他们在主题中使用的scrollTo版本已经过时, 并且在最新版的chrome中也无法使用:
https://github.com/flesler/jquery.scrollTo/issues/164
尝试使用最新版本, 它应该可以工作。
【$.scroll在Chrome中不起作用】否则, 如果由于某种原因而无法更新插件, 则可以使用以下方法使其工作:
jQuery('html, body').animate({scrollTop: jQuery("#skills").offset().top}, 'slow');
推荐阅读
- 二级菜单未显示在WordPress页脚中
- 屏幕宽度不正确。如果删除滚动条,则变得准确
- admin_post_ {action}调用的函数中全局变量的范围
- WordPress博客中的Rogue&nbsp
- 保存WordPress主题选项输入值
- 以缓慢的顺序返回自定义分类法
- WP自适应背景缩略图
- 使用摘要[wp_trim_words()]时保留格式
- Rest API不适用于WP中帖子类型的实时状态属性