$.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屋！