jQuery Smooth Horizo​​ntal Scroll

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();
});
});

锚点工作正常，单击导航会将您带到所需的部分，但跳转而不是滚动。

任何想法为什么？

Answer 1

向您的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();
});
});

同样你可以为b，c，d类构建js。

Answer 2

看起来你的代码是正确的，除了这个：

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

将name更改为id。据我所知，锚标签没有HTML name属性。此外，您不需要为您的部分“相应的锚点”。假设您的部分包含<section>或<div>，只需将每个包装块元素与每个锚链接中的id相同href。所以：

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

Answer 3

也许你忘了使用jquery缓动来制作动画 http://matthewlein.com/experiments/easing.html