jQuery动画滚动不起作用

时间:2014-04-05 21:18:24

标签: javascript jquery html5 jquery-animate

我试图让jQuery动画滚动功能正常工作,所以当用户点击按钮时,它会很好地向下滚动。我已经完成了几个教程,但我无法使动画工作。当我点击按钮时,它会跳转到相应的区域,但它是突然的,并且没有任何动画。这是我的代码:

jQuery的:

<script>
    $(function() {
       $('a[href*=#]:not([href=#])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &&  location.hostname == this.hostname) {
             var target = $(this.hash);
             target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
             if (target.length) {
                $('html,body').animate({
                   scrollTop: target.offset().top
                }, 1000);
             return false;
             }
           }
       });
   });
</script>  

HTML:

<ul class="list-inline intro-social-buttons">

   <li><a href="#moreinfo" class="btn btn-default btn-lg"><i class="fa fa-rocket fa-fw"></i> <span class="network-name">Learn More</span></a>
   </li>

</ul>

然后是:

<div class="content-section-a" id="moreinfo">

jquery-1.10.2.js和jQuery.min.map都链接并加载没有问题。我做错了什么?

2 个答案:

答案 0 :(得分:2)

这可能是问题所在:

target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

HTML锚点的默认设置是跳转到“#”后面带有名称/ id的元素。

此处显示:http://jsfiddle.net/avBst/1/

这可能意味着你的目标var实际上没有返回一个项目,而jQuery根本没有激活代码。


以下是滚动到id为“at_bottom”的指定div和返回顶部的链接的简单代码。

http://jsfiddle.net/xUs6g/4/

更多“一刀切”的答案:

http://jsfiddle.net/UGfDj/1/

说明:

使用自定义属性创建链接:

<a class="scroll_to" data-more-info="section_one">Go To Section One</a>

和一个匹配ID的div

<div id="section_one" class="section">

单击该链接时,提取属性值并滚动到具有该ID的div。

$("a.scroll_to").click(function() {
  var target = $(this).attr("data-more-info");
  $("html, body").animate({ scrollTop: $("#"+target).offset().top - 50 }, "slow");
  return false;
});

-50是为了抵消小提琴中的上边距。你可能不需要它。

这样您就不需要为所有滚动按钮​​等编写点击功能。

答案 1 :(得分:0)

有一个简单的CSS解决方案but it's not available on all browsers。 我推荐一个jquery答案,但这是一个简洁的CSS技巧,挽救了我的生命,我很想分享:)

html,body {
    scroll-behavior: smooth;
}