$.scrollTo 在 Chrome 中不起作用 [英] $.scrollTo not working in Chrome
问题描述
我制作了一个简单的 WordPress 网站,其主题名为 OneEngine.
I made a simple WordPress site with a theme called OneEngine.
这是一个演示链接:https://oneengine.enginethemes.com/
有趣的是,在 Chrome 中导航似乎不起作用.
Interestingly, in Chrome the navigation does not appear to work.
我已经确定了负责滚动的脚本片段.
I have pinpointed the piece of script responsible for scrolling.
// 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()
但这会产生没有偏移的跳跃锚点.
I'm confident that the part that isn't working is $.scrollTo();
. Typing this into Google yielded window.scrollTo
so I changed every instance to window.scrollTo()
but this yielded jumpy anchors with no offset.
这部分offset:-$(".sticky-wrapper").height()
我知道大致类似于:
This section offset:-$(".sticky-wrapper").height()
I know is roughly similar to:
var stickyWrapperHeight = $(".sticky-wrapper").height()
(76 像素).
我实际上找不到所描述的原生 scrollTo 方法,所以我认为它实际上可能是 JQuery scrollTo - https://github.com/flesler/jquery.scrollTo
I can't actually find a native scrollTo method as described so I think it may, in fact, be JQuery scrollTo - https://github.com/flesler/jquery.scrollTo
我最大的问题是为什么这在 Chrome 中不起作用?
My biggest question would be why doesn't this work in Chrome?
我已经看到了以下潜在的替代方案:
I've seen potential alternatives such as the following:
$("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()
?
Am I just using an outdated version of scrollTo()
?
推荐答案
即使他们的演示页面上存在 SSL 问题,并且如果您不键入 jQuery() ,您得到的$"也不是一个函数.我注意到即使您尝试在控制台中直接使用该插件,它仍然无法正常工作.
Even if they have SSL problems on their demo page and that you get "$" is not a function if you don't type down jQuery() instead. I noticed that it still doesn't work even when you try to use the plugin right in the console.
他们在主题中使用的 scrollTo 版本已经过时,并且在最新版本的 chrome 中也无法使用:
The version of scrollTo they use in the theme is outdated and is also known not to work in recent versions of chrome :
https://github.com/flesler/jquery.scrollTo/issues/164
用最新版本试试,应该可以.
Try it with the latest version, it should work.
否则,如果由于某种原因您无法更新插件,您可以使用以下方法使其工作:
Otherwise if for some reason you can't update the plugin you can make it work using something like this :
jQuery('html,body').animate({scrollTop: jQuery("#skills").offset().top}, 'slow');
这篇关于$.scrollTo 在 Chrome 中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!