$ .scrollTo не работает в Chrome - PullRequest
0 голосов
/ 10 мая 2018

Я сделал простой сайт на 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(), но это дало нервные якоря без смещения.

Этот раздел 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()

1 Ответ

0 голосов
/ 10 мая 2018

Даже если у них есть проблемы с SSL на их демонстрационной странице, и вы получаете «$», это не функция, если вы вместо этого не набираете jQuery (). Я заметил, что он все еще не работает, даже когда вы пытаетесь использовать плагин прямо в консоли.

Версия scrollTo, которую они используют в теме, устарела и, как известно, не работает в последних версиях Chrome:

https://github.com/flesler/jquery.scrollTo/issues/164

Попробуйте с последней версией, должно работать.

В противном случае, если по какой-то причине вы не можете обновить плагин, вы можете заставить его работать, используя что-то вроде этого:

jQuery('html,body').animate({scrollTop: jQuery("#skills").offset().top}, 'slow');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...