Как замедлить прокрутку страницы на сайте вниз?

Question

[ysaeredir]

Есть навигационное меню, на каждую ссылку повешен идентификатор, которым обозначен div внизу страницы. Как сделать, когда я щелкаю на ссылку, переход к блоку div был не быстрым, а медленным.

Answer 1

[bears]

Можно так:

<ul class="nav">
    <li><a href="#category-1">Категория 1</a></li>
    <li><a href="#category-2">Категория 2</a></li>
    <li><a href="#category-3">Категория 3</a></li>
</ul>

<div id="category-1">Описание категории 1</div>

$(function(){

    $('.nav a').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 2000);
    });

});

Comments

[ysaeredir]

Код рабочий?

[bears]

ysaeredir: Извиняюсь, код поправил. Он то рабочий, просто опечатка, вместо prevenеtDefault() написал prevendDefault().

[ysaeredir]

вписал идентификаторы и ничего

[Виталий Инчин ☢]

ysaeredir: jsfiddle.net/In4in/opjk2d0o

[bears]

ysaeredir: Проверьте в консоли, может ошибка где-то в другом месте есть Виталий Инчин ☢: скинул ссылку, там все работает

[ysaeredir]

мне просто надо этот код добавить ничего не менять?

[bears]

ysaeredir: Нет, ничего менять не надо - код рабочий. Просто нужно прописать атрибут href ссылкам - href="#category-1", в этом случае, ID блока должен быть "category-1". НО, на рабочем сайте естественно нужно выбирать не все ссылки как в примере ( $('a') ) а только ссылки меню ( $('#menu a') например, если у Вас там ID = menu)

[ysaeredir]

ссылки можно через запятую перечислить?

[bears]

ysaeredir: Изменил код

[ysaeredir]

bir-moto.ru вот сайт и как я сделал

$('#s, #m, #k').on('click', function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);
});

Правильно?

[bears]

ysaeredir: В этом случае, сделайте так - $('.nav a').on(.........

[ysaeredir]

Вот так

$('.nav a').on('click', function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 2000);
});

[ysaeredir]

Время задаешь, а скорость не меняется, почему?

[bears]

ysaeredir: у вас что-то не так, надо разбираться. Возможно, где-то при скроле что-то делаете, и оно мешает, или еще что-то. Но код работает должным образом - jsfiddle.net/In4in/opjk2d0o

[ysaeredir]

а поменяйте время на 3 секунды например, прокрутка медленнее будет происходить

[bears]

ysaeredir: Скорость прокрутки меняется в зависимости от двух факторов: времени и "расстояния" от ссылки до блока в пикселях.

[ysaeredir]

можете время поменять, а расстояние оставить, как есть в предыдущем примере. Хочется посмотреть действительно прокрутка замедлится. Поставьте 5 секунд.

[bears]

ysaeredir: Вы почему-то вставили код как есть, но надо вот так - $(function(){

$('.nav a').on('click', function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 2000);
});

});

Код выше тоже обновил, попробуйте так

[ysaeredir]

Спасибо, очень помогли

[ysaeredir]

Если прокрутка идет и надо ее остановить на том месте, где она находится, не знаешь, как это реализовать?