jQuery使用动画顺利滚动到div

概述： 我正在使用锚标签滚动到它们各自的div，如href中所分配的。jQuery使用动画顺利滚动到div

HTML标记：

<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但滚动不平滑或缓慢。我宁愿说它根本就不滚动。它只是跳到那个div。

我已经使用了动画，并且使用了慢的参数。那么，我的错误是什么？我怎样才能实现我在这里寻找的平滑滚动。

网站：

http://irankmedia.com/uskincare/

您好请导航栏本网站不给我平滑滚动效果我期待。

希望它会带来一个清晰的想法。

来源

2015-07-21 Kiran Dash

尝试'$（ 'ul.nav'）找到（ 'A'）点击。（函数（e）{e.preventDefault（）;' – atmd

@Kiran Kumar Dash语法错误，无法识别的表达式：## howToUse会在那里由于$（'＃'+ $ href） –

问题是$('#'+ $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

来源

2015-07-21 07:56:56

在我的情况下，它只是跳转到div而不是滚动。我的问题是它不能顺利滚动。因此，可能是什么原因？ –

@KiranKumarDash因为有一个脚本错误，动画代码没有得到执行...所以锚点击的默认动作正在发生 - 问题是https://jsfiddle.net/arunpjohny/dctnbo8c/ –

@KiranKumarDash和该解决方案https://jsfiddle.net/arunpjohny/dctnbo8c/1/ –

只是删除与$ 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

来源

2015-07-21 08:06:35

谢谢。但仍然不顺畅。它只是跳转到div。我期待它能顺利滚动。 –

@Kiran Kumar Dash您可以将'slow'更改为特定的英里数，如1000或根据您的需要参考** http：//api.jquery.com/animate/ **了解如何应用动画速度 –

这是网站我在尝试它：irankmedia.com/uskincare –

试试这个：

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

演示here

来源

2015-07-21 08:07:55 Ash

仍然无法解决我的问题。它只是跳转到div。我期待它能顺利滚动。 –

你试过演示了吗？ – Ash

我见过你的代码。所以，我知道代码是正确的。但在我的情况下，它只是跳转到div。 –

jQuery使用动画顺利滚动到div

回答

相关问题