jQuery - анимированный ScrollTop возвращается назад - PullRequest
Новая
       8

jQuery - анимированный ScrollTop возвращается назад

0 голосов
/ 11 марта 2020

Этот сценарий несколько похож на этот вопрос , но вместо этого он предназначен для загрузки страницы.

С этим сайтом; у нас есть фиксированный заголовок, и у нас есть эти ссылки, которые будут go на другую страницу и к элементу HTML. Он работает почти все время на простом refre sh, но с жестким refre sh он прокручивается вниз к элементу и затем возвращается обратно туда, где пользователь начал до refre sh , Это может быть вверху страницы, посередине или ниже элемента.

Я заметил и смутился, что метод обратного вызова complete (для анимации) называется дважды . У меня была метка времени, которая будет напечатана на консоли, и это было точно такое же время, и у меня был console.trace с идентичными результатами. Может ли это быть связано с тем, что он прыгнул обратно?

Из вопроса, который я упомянул выше, он предложил использовать preventDefault, но это будет проблематично, когда метод ready не поможет вывести значение события. 

(function($) {
    // Page Load
    var hash = checkForHash();

    if(hash) {
        setTimeout(function() {
            goToTarget(hash);
        }, 750, hash)
    }

    function checkForHash() {
        var hash = window.location.hash;

        if(hash === '' || hash === '#' || hash === undefined) {
            return false;
        } else {
            return hash;
        }
    }


    function goToTarget(hash) {
        var $target = $(hash);
        var $fixedHeader = $('.navbar-static-top')[0];
        $target = $target.length ? $target : $('[name="' + hash.slice(1) + '"]');

        if($target.length) {
            var isAnimating = false;
            var scrollDistance = $target.offset().top - ($fixedHeader.clientHeight + 20);

            if(!isAnimating) {
                isAnimating = true;

                $('html, body').stop().animate({
                    scrollTop: scrollDistance
                }, 250, 'linear', function() {
                    // window.scroll(0, scrollDistance);
                    isAnimating = false;
                } );
            }
        }
    }

})(jQuery.noConflict);
...