【问题标题】:$('html, body').stop().animate" not animating$('html, body').stop().animate" 没有动画
【发布时间】:2014-01-06 23:56:32
【问题描述】:

我正在尝试为我的 HTML 页面设置动画,以便它滚动到一个标签,所以我使用了这段代码

$(document).ready(function(){
   $('#button a').click(function( e ){
      e.preventDefault();
      var el = $( this.getAttribute('href') );
      var offs = el.offset();
      $('html, body').stop().animate({ scrollTop: offs.top-100 },500);    
   });   
});

HTML

<p id="button"><a href="#moreInfo">More Info</a></p>
<!--Some other elemts here-->

<div id="moreInfo" style="text-align: center">

它实际上会滚动到所需的位置,但它不做动画,它只会滚动而没有任何应有的酷过渡。

提前致谢。

【问题讨论】:

  • 你期待哪种“酷过渡”?
  • 应该做的,所有的身体向下移动,到div。

标签: jquery html animation jquery-animate


【解决方案1】:

这应该更适合您。无需指定“#button”。您可以通过按照我在下面显示的方式编写函数来平滑滚动到标记中的任何 ID。我测试了我的代码,它可以工作:

$(document).ready(function(){
  $('a[href^="#"]').click(function(e) {
  e.preventDefault();

  var target = this.hash,
  $target = $(target);

  $('html, body').stop().animate({
      'scrollTop': $target.offset().top-100
  }, 500, function () {
      window.location.hash = target;
  });
 });
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-06-23
    • 2018-02-14
    • 2017-02-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-01
    相关资源
    最近更新 更多