1

Для плавный прокрутки использую данный код:

$(document).ready(function() {
    $(".navbar-default ul li a[href^='#']").on('click', function(e) {

        // prevent default anchor click behavior
        e.preventDefault();

        // animate
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top
        }, 400, function() {
            // when done, add hash to url
            // (default click behaviour)
            window.location.hash = this.hash;
        });
    });

При клике на ссылку в адресной строке добавляется #undefined вместо значения hash этой ссылки.

Верстка

2 ответа 2

1

this внутри функции, вызываемой при завершении анимации, указывает на элемент, для которого была вызвана анимация. В данном случае, сначала на html, затем на body.

Имеет смысл сохранить a в отдельную переменную перед вызовом анимации. Например, так: var that = this;, после чего использовать window.location.hash = that.hash;

Итоговый код (я убрал html из html, body, чтобы функция вызывалась лишь один раз):

$(document).ready(function()
{
    $(".navbar-default ul li a[href^='#']").on('click', function(e)         
    {
        e.preventDefault();
        var that = this;
        $('body').animate({
            scrollTop: $(this.hash).offset().top
        }, 400, function() {
            window.location.hash = that.hash;
        });
    });
});

Пример в fiddle.

5
  • Помогло, но теперь не работает e.preventDefault() в строку добавляется #home, #about, #contact....
    – neoman
    16 июн 2015 в 6:47
  • @neoman в какую строку добавляется? Значение в адресной строке меняется в коде: window.location.hash = that.hash;
    – Regent
    16 июн 2015 в 6:50
  • в адресной строку D:/works/web/claymore/index.html#home
    – neoman
    16 июн 2015 в 6:54
  • 1
    @neoman повторюсь: #home там появляется из-за присвоения в коде: window.location.hash = that.hash;. Если не нужно отображать якорь в адресной строке, то достаточно удалить эту строку.
    – Regent
    16 июн 2015 в 6:58
  • чудно! благодарю
    – neoman
    16 июн 2015 в 7:02
0

В том, что вы пытаетесь взять значение там, где его нет:

window.location.hash = this.hash;
                       ^^^^^^^^^

this в данном контексте - просто HTML-элемент, у него нет свойства hash. Вы можете получить адрес (href) ссылки, по которой кликнули, следующим образом:

window.location.hash = $(this).attr('href');

Это создаст jQuery-обертку над текущим элементом, а затем получит атрибут href. не забудьте также заменить и более ранние вхождения.

2
  • Фраза вы пытаетесь взять значение там, где его нет верная, но дело не в том, что якобы у DOM Element'a <a> нет свойства .hash, а в том, на что указывает this.
    – Regent
    16 июн 2015 в 6:45
  • @Regent мда, не знал.
    – etki
    16 июн 2015 в 6:50

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.