jQuery плавный прокрутка до div с использованием анимации

Question

Обзор: Я использую метки привязки, чтобы прокрутить их соответствующие div, назначенные в href.

HTML Markup:

<ul class="nav navbar-nav"> 
    <li><a href="#howToUse">How to use</a></li> 
    <li><a href="#benefits">Benefits</a></li> 
</ul> 

<div id="howToUse"> 
    Some content 
</div> 

<div id="benefits"> 
    Some content 
</div> 

JQuery:

$('ul.nav').find('a').click(function(){ 
    var $href = $(this).attr('href'); 
    var $anchor = $('#'+$href).offset(); 
    $('body').animate({ scrollTop: $anchor.top },'slow'); 
    return false; 
}); 

Проблема: Итак, теперь, когда я нажимаю на якорь тэга окна прокручивается частности ДИВ, но свиток не является гладким или медленным. Я бы предпочел сказать, что это вовсе не прокрутка. Он просто прыгает на этот div.

Я использовал анимацию, а также использовал параметр slow with it. Итак, в чем моя ошибка? Как я могу получить гладкий свиток, который я ищу здесь.

Сайт:

http://irankmedia.com/uskincare/

Привет там, пожалуйста, проверьте панель навигации на этом сайте, который не дает мне гладкую прокрутку эффекта я ожидал.

Надеюсь, что это принесет четкую идею.

Answer 1

Проблема заключается в $('#'+ $href).offset();, так как сама href имеет #, он выдает сообщение об ошибке, как Uncaught Error: Syntax error, unrecognized expression: ##howToUse

$('ul.nav').find('a').click(function (e) { 
    e.preventDefault(); 
    var target = $(this).attr('href'); 
    var $anchor = $(target).offset(); 
    $('body').stop().animate({ 
     scrollTop: $anchor.top 
    }, 'slow'); 
}); 

Демо: Fiddle

Answer 2

Просто удалить '#' используется с $ HREF в противном случае ваш код работает штраф чувак

$('ul.nav').find('a').click(function(){ 
    var $href = $(this).attr('href'); 
    var $anchor = $($href).offset(); 
    $('body').animate({ 
      scrollTop: $anchor.top 
    },'slow'); 
    return false; 
}); 

он бросает ошибку синтаксиса, непризнанный выражение: ## howToUse

Answer 3

Попробуйте это:

$('ul.nav').find('a').click(function() { 
    var $href = $(this).attr('href'); 
    //var $anchor = $('#'+$href).offset(); 
    $('html, body').animate({ 
     scrollTop: $($href).offset().top 
    }, 2000); 
    return false; 
}); 

Demo here