jquery - jQuery Smooth Horizontal Scroll

Question

I've created a long horizontal page and using anchors to navigate to section's within the page. I added a jQuery smooth scrolling function but it's not taking affect?

Here's the navigation:

<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>

Within the content i've added corresponding anchors:

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

And here's the jQuery function:

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

The anchor's work fine, clicking the navigation takes you to the desired section but it jumps instead of scrolling.

Any ideas why??

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。name据我所知，锚标签没有 HTML属性。此外，您的部分不需要“相应的锚点”。假设您的部分用<section>or包裹<div>，只需将每个包裹块元素与每个锚链接中的id相同href。所以：

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

Answer 3

也许你忘记使用 jquery easing 动画 http://matthewlein.com/experiments/easing.html