Плавная прокрутка jQuery прерывается вызовом AJAX

Я искал, и я искал причину этой проблемы. Но каждый раз, когда я ищу, я получаю «как добавить плавную прокрутку». Это НЕ проблема. У меня есть установка WordPress, и плавная прокрутка работает нормально во всех случаях, кроме результата, добавленного из файла JS.

$(document).ready(function(){
function descriptions(){
    var apiCall = '[APIRUL]';

    $.ajax({
        url: apiCall,
        type: 'get',
        dataType : 'json',
        success: function(data){
            $.each(data, function(i, p) {
                var name = p.name;
                var namelc = p.namelc; //lowercase
                var description = p.description;
                var output = '<div id="' + namelc + '"><h3">' + name + '</h3><p>' + description + '<br /><a href="#table">back to top</a></p></div>';

                $('#description').append(output);
            });
        },
        error: function(xhr, status, error) {
            console.log(error);
        }
    });
}descriptions();
});

Все возвращается нормально. С самим jQuery или AJAX проблем нет. Но по какой-то причине "a href="#table"" "прыгает" обратно в таблицу (выше описаний) и добавляет хэш к адресу (например, http://example.com/somepage/#anchor), а не переходить к нему (как и любой другой якорная ссылка на той же странице. Т.е. в плавной прокрутке нет ничего плохого. Что-то еще мешает).

Я уверен, что этому поведению есть объяснение и решение. Но я просто не могу его найти, потому что, как я упоминал ранее, каждый раз, когда я ищу «плавная прокрутка не работает», я получаю множество результатов «как добавить плавную прокрутку».

Любая помощь, в полном объеме или толчок в правильном направлении, очень ценится! /застрявший!


wordpress jquery ajax smooth-scrolling
person axelra82    schedule 25.04.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы используете плавную прокрутку JQuery из hздесь, похоже, что она обрабатывается как слушатель. Если вы вводите с помощью AJAX, по этой ссылке не будет прослушивателя. Перезапустите привязку - примерно так:

$('#description a').smoothScroll();

ПОСЛЕ этой строки в вашем коде:

$('#description').append(output);
person Peter Mark    schedule 25.04.2016
comment
Хм. Интересно. Хотя это само по себе не решило проблему (выдает ошибку в консоли, что smoothScroll() не является функцией), я понимаю, к чему вы клоните. Я не знаю, как добавляется плавная прокрутка (будь то через WordPress или тему, которую я использую). Я думаю, что мне придется копнуть немного глубже на эту тему). Надеюсь, вы здесь что-то делаете. - person axelra82; 25.04.2016
comment
Да, и, конечно же, предполагается, что вы используете эту библиотеку... Это один из тех случаев, когда уровни абстракции, поставляемые с несколькими библиотеками, могут вас замедлить. - person Peter Mark; 25.04.2016
comment
Спасибо за вашу помощь @peter Теперь эта проблема решена (см. мой ответ ниже). - person axelra82; 25.04.2016

arrow_upward
0
arrow_downward

Итак, благодаря ответу Питера Марка (спасибо за это! Действительно. Я застрял на этом больше дня. И без вашей помощи это было бы дольше, это точно!) Я понял, что происходит, и это помогло решение проблемы. На данный момент, не копаясь в слоях файлов, чтобы увидеть, откуда исходит начальная плавная прокрутка (как называется слушатель), это рабочее решение. Возвращаем эту приятную плавную прокрутку ко всем добавленным элементам jQuery: D

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $(this.hash).offset().top
    },350,'easeInOutExpo');
    return false;
});

Как объяснил Питер, это должно быть добавлено ПОСЛЕ (в противном случае мы просто нацелились бы на существующие якоря, а не на новые, которые мы создаем/добавляем с добавлением).

person axelra82    schedule 25.04.2016
comment
Рад, что это помогло! Не забудьте принять свой собственный ответ. - person Peter Mark; 26.04.2016