Как сделать плавную прокрутку страницы до якоря?

Question

[Murat Atila]

Здравствуйте.

Подскажите, как сделать плавную прокрутку до якоря на странице?

Перепробовал несколько разных вариантов. Есть ссылка

<a  class="trig" href="#game"><img src="img/arrow.png"></a>

Ссылается на
<div class="game" id="game">

С js не дружу, но нагуглил разные варианты как:
1)

$(function(){
$('.trig').on('click', function(e){
	$('html,body').stop().animate({ scrollTop: $('#game').offset().top }, 1000);
	e.preventDefault();
});
});

2)

$(function() {
    $('a.trig').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

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

Answer 1

[Roquie]

Ничего сложного.
jsfiddle.net/74q3cgh8

Comments

[Murat Atila]

Дописал к ссылке

<a  <b>id="trig"</b> class="trig" href="#game"><img src="img/arrow.png"></a>

JS

$(function(){
 $('#trig').on('click', function()
        {
            $('html, body').animate({
                scrollTop: $('#game').offset().top
            }, 600);
        });
});

И всё равно не работает =/

[Murat Atila]

Хм... Странно, сейчас попробовал вставить js в сам html файл и всё заработало, раньше подключал в хедере. Спасибо за помощь.

[Roquie]

Пожалуйста. Соблюдайте порядок подключения JS библиотек.

[Murat Atila]

Может вы еще подскажете, почему в момент клика картинка скачет внезапно, а потом плавно прокручивается?

[Roquie]

Надо смотреть, что вы там делали. Попробуйте сами. А так, проблема явно не в прокрутке jsfiddle.net/74q3cgh8/1 .

[Murat Atila]

@Roquie Ещё раз спасибо.