twitter-bootstrap - 尝试通过 Bootstrap 按钮组点击触发平滑滚动

Question

我有一系列用于在我的页面上构建测验的 Bootstrap 按钮组，我希望页面在按下其中一个按钮后自动平滑地滚动到下一个问题/按钮组/选择了一个答案。我知道如何使用 anchor 元素进行平滑滚动，但据我所知，按钮必须是按钮，不能是 anchor ，因为如果我将它们更改为 anchor ，它们将无法正常运行。我正在使用 Meteor 模板事件来处理选择测验答案时发生的事情背后的逻辑。这是其中一个按钮组的 HTML 示例:

    <div class="panel-body">
            <div id="scenario" class="row btn-group">
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail-noborder">
                        <button type="button" class="btn btn-default house" data-val="house">
                            <img class="img-responsive" alt="icon showing house" src="shelter.png">
                            <h3 class="caption">Home:</h3>
                            <small>Earthquake</small><br>
                            <small>Storm</small><br>
                            <small>Etc.</small><br>
                        </button>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail-noborder">
                        <button type="button" class="btn btn-default car" data-val="car">
                            <img class="img-responsive" alt="icon showing car" src="car.png">
                            <h3 class="caption">Road:</h3>
                            <small>Breakdown</small><br>
                            <small>Accident</small><br>
                            <small>Etc.</small><br>
                        </button>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail-noborder">
                        <button type="button" class="btn btn-default gethome"  data-val="gethome">
                            <img class="img-responsive" alt="icon showing office" src="office.png">
                            <h3 class="caption">Office:</h3>
                            <small>Earthquake</small><br>
                            <small>Utilities Disruption</small><br>
                            <small>Etc.</small><br>
                        </button>
                    </div>
                </div>
            </div>
        </div>

这是一个 Meteor 模板事件 javascript 处理按钮点击的例子:

    'click .hike' : function(){
  displayReset();
  Session.set("scenario", "Hike");
  console.log("Scenario is " + Session.get("scenario"));
  scenarioCodeMaker();
  kitRebuild();
},

我还在 Meteor 模板事件 javascript 中获得以下内容，以便一次只能选择每个组中的一个按钮，这是我必须拥有的行为:

    'click button': function(e) {
  var $target = $(e.currentTarget);
  //console.log($target);
  $target.closest(".btn-group").find("button").removeClass('active');
  $target.addClass('active');

},

我在其他地方有 anchor 元素，可以触发平滑滚动到页面上的其他位置，我在 Meteor 模板 .rendered 函数中使用以下 javascript 来完成此操作:

    $(function() {
        $('a[href*=#]:not([href=#]):not([data-toggle=collapse])').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;
        }
      }
    });
  });

是否有可能以某种方式将它们更改为按钮而不破坏它们的行为或通过单击按钮触发滚动事件？我是编程和 stackoverflow 的新手。谢谢!

Answer 1

您已经拥有在 .rendered 中平滑滚动的代码。

$('html,body').animate({
  scrollTop: target.offset().top
}, 1000);

您可以使用相同的代码滚动到页面中的任何元素。例如，要滚动到此答案，您可以使用此代码(滚动到顶部，打开控制台并粘贴此代码，等待魔术发生):

$('html,body').animate({
  scrollTop: $('#answer-29996593').offset().top
}, 2000);