JQuery Smooth Horizontal Scroll

Question

J'ai créé une longue page horizontale et utilisé des ancres pour accéder aux sections de la page. J'ai ajouté une fonction de défilement lisse jQuery, mais cela ne prend pas l'effet?

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

Dans le contenu que j'ai ajouté des ancres correspondantes:

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

Et voici la fonction 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(); 
}); 
}); 

Le travail de l'ancre fin, en cliquant sur la navigation vous amène à la section désirée mais ju mps au lieu de faire défiler.

Des idées pourquoi?

Answer 1

Il semble que votre code est correct, sauf pour cela:

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

changement name-id. Il n'y a pas d'attribut HTML name pour les balises d'ancrage autant que je sache. En outre, vous n'avez pas besoin de "points d'ancrage correspondants" pour vos sections. En supposant que vos sections sont entourées d'un <section> ou <div>, donnez à chacun de vos éléments de bloc d'emballage un id identique au href de chacun de vos liens d'ancrage. Alors:

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

Answer 2

Peut-être que vous oubliez d'utiliser jquery assouplissement des animations http://matthewlein.com/experiments/easing.html

Answer 3

Il est simple classe ajouter à vos div qui ont besoin de faire défiler par exemple ci-dessous:

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

Maintenant, votre js sera comme ceci:

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

De même, vous pouvez créer js pour les classes b, c et d.