尝试通过引导按钮组单击触发平滑滚动

Question

我有一系列引导按钮组，用于在我的页面上构建测验，我希望页面在按下一个按钮后自动平滑地滚动到下一个问题/按钮组/选择了一个答案。我知道如何使用锚元素进行平滑滚动，但据我所知，按钮必须是此处的按钮并且不能是锚，因为如果我将它们更改为锚，它们的行为就会不正常。我正在使用 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');

},

我在其他地方有锚元素触发平滑滚动到页面上的其他位置，我在 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);