Question

我正在尝试为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">

它实际上会滚动到所需的，但它不会动画，它只会滚动而不会像它应该的那样进行任何很酷的过渡。

提前致谢。

Answer 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;
  });
 });
});

$（'html，body'）。stop（）。动画“不动画

1 个答案: