使多个按钮平滑滚动到顶部，如果按下

下面的代码(jQuery)将动画滚动到页面的顶部，每当你点击一个元素与类btn，即使更多的添加与JS没有刷新:

$(function(){
  $("body").on("click",".btn",function(){
    $("body").animate({
      scrollTop:0
    });
  });
});

每个单独的块都需要有自己的ID

<div id="block1"></div>

和按钮必须有锚点引用那个ID

<a href="#block1">Block 1</a>

然后谷歌平滑滚动库处理其余的或使用应该超级容易

例如:http://cferdinandi.github.io/smooth-scroll/

您可以使用下面的代码来将事件委托给动态生成的元素:

$(function() {
  $("body").on("click", "a[href^=#]", 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ol>
      <li><a href="#Welcome">Welcome</a></li>
      <li><a href="#First">Item 1</a></li>
      <li><a href="#Second">Item 2</a></li>
      <li><a href="#Third">Item 3</a></li>
      <li><a href="#Fourth">Item 4</a></li>
      <li><a href="#Fifth">Item 5</a></li>
      <li><a href="#Sixth">Item 6</a></li>
      <li><a href="#Seventh">Item 7</a></li>
    </ol>
    <h1 id="Welcome">Welcome</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus earum perferendis asperiores deserunt, expedita inventore architecto ipsum blanditiis possimus fuga harum esse nulla. Nemo nihil beatae repellat totam deleniti. Quod!</p>
    <h2 id="First">First</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed possimus aliquid, asperiores ratione ab natus eos iusto, deleniti nemo ut consectetur tempora aspernatur. Impedit quibusdam, omnis doloremque quis et numquam!</p>
    <h2 id="Second">Second</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed possimus aliquid, asperiores ratione ab natus eos iusto, deleniti nemo ut consectetur tempora aspernatur. Impedit quibusdam, omnis doloremque quis et numquam!</p>
    <h2 id="Third">Third</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus nemo quo nisi rem nostrum similique, blanditiis quod cupiditate expedita aut. Nisi quibusdam, enim qui doloribus similique ullam impedit esse quidem?</p>
    <h2 id="Fourth">Fourth</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa sit commodi illo eos vel facere cumque aperiam, provident dolorum assumenda quidem vero ad qui harum voluptatum quos enim placeat quae!</p>
    <h2 id="Fifth">Fifth</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, adipisci molestiae dicta ad cum id debitis eos nihil reprehenderit beatae, numquam laboriosam, dolorum quis odio optio! Delectus illum, nemo suscipit!</p>
    <h2 id="Sixth">Sixth</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem facere nemo voluptates numquam accusamus optio, voluptatum amet, aliquam eveniet repudiandae atque voluptate ad commodi ducimus impedit ut dolorem iste libero.</p>
    <h2 id="Seventh">Seventh</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet vel ea quo assumenda quam commodi, libero, aliquid praesentium illum nulla, consectetur itaque minus optio quae! Maxime consectetur a modi ad.</p>

我做了以下操作:

添加了这个脚本:

jQuery(document).ready(function ($) {
    $(".scroll").click(function (event) {
        event.preventDefault();
        $('html,body').animate({scrollTop: $(this.hash).offset().top}, 500);
    });
});

then更改this:

<div class="row btn btn-default btn-block" onclick="active_class('B105')">
            <div class="col-xs-4" style="width: 230px">History(Ε)</div>
            <div class="col-xs-2" style="width: 70px" >13:00:00</div>
            <div class="col-xs-2" style="width: 70px" >15:00:00</div>
            <div class="col-xs-2" style="width: 70px" >B105</div>
</div>

:

<a class="row btn btn-default btn-block scroll" href="#top" onclick="active_class('B105')">
            <div class="col-xs-4" style="width: 230px">History(Ε)</div>
            <div class="col-xs-2" style="width: 70px" >13:00:00</div>
            <div class="col-xs-2" style="width: 70px" >15:00:00</div>
            <div class="col-xs-2" style="width: 70px" >B105</div>
</a>

然后我把最上面元素的id改成了id="top"

我想要的"不显示#"在JQuery部分。

感谢你们提供的帮助，帮助我一点一点地找到了答案。:)