jQuery 부드러운 수평 스크롤

Question

나는 긴 수평 페이지를 만들고 앵커를 사용하여 페이지 내 섹션으로 이동했습니다. 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(); 
}); 
}); 

앵커의 잘 작동 :

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

그리고 여기에 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> 

:

다음은 네비게이션의 탐색 버튼을 클릭하면 원하는 섹션으로 이동하지만 ju 스크롤 대신 mps입니다.

모든 아이디어가 왜 ??

Answer 1

그것은 당신의 코드는 다음을 제외하고 올바른 다음과 같습니다

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

변경 id-name. 앵커 태그에 대한 HTML name 속성은 내가 아는 한 없습니다. 또한 섹션에 "해당 앵커"가 필요하지 않습니다. 섹션이 <section> 또는 <div>으로 감싸 졌다고 가정하면 각 래핑 블록 요소에 각 앵커 링크의 href과 동일한 id을 부여하면됩니다. 그래서 :

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

Answer 2

은 어쩌면 당신은 애니메이션 http://matthewlein.com/experiments/easing.html

Answer 3

에 대한 완화 jQuery를 사용하는 것을 잊지 그것은 아래의 예를 들어 스크롤해야 할 당신의 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를 빌드 할 수 있습니다.