jQuery Гладкая горизонтальная прокрутка

Question

Я создал длинную горизонтальную страницу и с помощью якорей, чтобы перейти к разделу на странице. Я добавил функцию плавной прокрутки jQuery, но не влияет на нее?

Вот навигация:

<ul class="nav"> 
<li><a href="#starters">Starters</a></li> 
<li><a href="#main">Main Dishes</a></li> 
<li><a href="#special">Special Dishes</a></li> 
<li><a href="#side">Side Dishes</a></li> 
</ul> 

В содержании я добавил соответствующие анкеры:

<a name="starters"></a> 

А вот функция JQuery:

$(function() { 
$('ul.nav a').bind('click',function(event){ 
    var $anchor = $(this); 

    $('html, body').stop().animate({ 
     scrollLeft: $($anchor.attr('href')).offset().left 
    }, 1500, "easeInOutExpo"); 
    event.preventDefault(); 
}); 
}); 

отлично работает анкера, нажатие на навигацию приведет вас к нужному разделу, но это ju mps вместо прокрутки.

Любые идеи, почему?

Answer 1

Похоже, что ваш код является правильным для этого, кроме:

<a name="starters"></a> 

Изменения name в id. Насколько я знаю, для атрибутов привязки нет атрибута HTML name. Кроме того, для ваших разделов вам не нужны соответствующие анкеры. Предполагая, что ваши разделы обернуты <section> или <div>, просто укажите каждый из ваших элементов блока упаковки id, идентичный href, с каждого из ваших якорных ссылок. Итак:

<section id="starters">content</section>

Answer 2

Может быть, вы забыли использовать JQuery ослабления для анимации http://matthewlein.com/experiments/easing.html

Answer 3

Это просто добавить класс к вашему div, которые необходимо прокручивать, например, ниже:

<ul class="nav"> 
<li class="a"><a href="#starters">Starters</a></li> 
<li class="b"><a href="#main">Main Dishes</a></li> 
<li class="c"><a href="#special">Special Dishes</a></li> 
<li class="d"><a href="#side">Side Dishes</a></li> 
</ul> 

Теперь, ваши js будут такими:

$(function() { 
$('#clickable element').bind('click',function(event){ 
    $('#targetelement or div').stop().animate({ 
     scrollLeft: $('.a').offset().left 
    }, 500); 
    event.preventDefault(); 
}); 
}); 

Аналогичным образом вы можете построить js для классов b, c, d.