Блог

Главная - Вопросы по программированию - анимация привязки jquery не работает

анимация привязки jquery не работает

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь анимировать прокрутку по ссылке привязки и получаю ошибку:

Не удается прочитать свойство ‘top’ неопределенного

Это js:

 $('a').click(function(){
    $('html, body').animate({
        scrollTop: $('[name="'   $.attr(this, 'href').substr(1)   '"]').offset().top
    }, 1000);
    return false;
});

И это html:

 <li><a href="index.html#r">My anchor link</a></li>

Комментарии:

1. как насчет скрипки

2. Не могу воспроизвести вашу проблему: jsfiddle.net/teddyrised/5XRj3 . Вы перенаправляете на index.html файл (т. Е. Переходите к привязке на другой странице)? Кроме того, существует ли элемент с этим атрибутом name="r" ? Возможно, вы путаете атрибуты name and id .

3. привязка ссылки работает, но не анимация. Я работаю над скрипкой..

Ответ №1:

это неправильно: $.attr(this, ‘href’).substr(1) , используйте это, чтобы получить атрибут href:

$(this).attr(‘href’);

Вот вам рабочий код. Сначала я извлекаю имя привязки, затем использую его:

 $('a').click(function(){
    var href = $(this).attr('href');
    var name = href.substr(href.lastIndexOf('#') 1);

    $('html, body').animate({   
        scrollTop: $('[name="'   name   '"]').offset().top
    }, 1000);
    return false;
});

Ответ №2:

offset метод возвращает undefined значение для пустых коллекций. Кажется, ваш селектор не выбирает ни одного элемента. Вы можете проверить length коллекцию или возвращаемое значение offset перед чтением top свойства.

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