我创建了一个名为OneEngine的简单WordPress网站。
以下是演示链接: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()
,但这会产生没有偏移的跳跃锚点。
我知道这部分offset:-$(".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()
?
答案 0 :(得分:2)
即使他们在他们的演示页面上遇到SSL问题,如果你没有输入jQuery(),那么“$”也不是函数。我注意到,即使您尝试在控制台中使用该插件,它仍然无效。
他们在主题中使用的scrollTo版本已经过时,并且还知道在最新版本的chrome中不起作用:
https://github.com/flesler/jquery.scrollTo/issues/164
尝试使用最新版本,应该可以使用。
否则如果由于某种原因您无法更新插件,您可以使用以下内容使其工作:
jQuery('html,body').animate({scrollTop: jQuery("#skills").offset().top}, 'slow');