按下结束时，Bootstrap Tour 返回顶部答案

【问题标题】：Bootstrap Tour Return To Top When End Pressed按下结束时，Bootstrap Tour 返回顶部
【发布时间】：2018-07-17 19:42:38
【问题描述】：

我在 Bootstrap 游览中使用以下代码来尝试捕捉用户按下结束游览按钮，当按下此按钮时，我希望用户返回到屏幕顶部。现在我的代码将在新的“弹出框”加载而不是单击结束游览按钮时运行。有没有办法做到这一点？我尝试将代码更改为完全在 HTML 中，例如 '"+End()+"' 到 'End()' 但这也不起作用。

(function(){
        var tour = new Tour({
    steps: [
          {
        element: ".tour-step.tour-step-four",
        placement: "right",
        title: "What is a marker",
        content: "The marker is a QR code which you can print out, or embed on a web page. To access and view the AR content, users can scan the marker with a QR code scanner on their smartphones."
      },
          {
        element: ".tour-step.tour-step-five",
        placement: "right",
        title: "Accessing content without a marker",
        content: "You can link directly to the AR Project so users can access the content without using a QR code scanner. You will still need to print out, or embed the marker on a web page so users can view the content."
      }
    ],
        template: function () {
        return (
            tour.getCurrentStep() === 4 
                ? "<div class='popover tour'>" + 
                    "<div class='arrow'></div>" +
                    "<h3 class='popover-title'></h3>" +
                    "<div class='popover-content'></div>" +
                    "<div class='popover-navigation'>" +
                        "<button class='btn btn-default' data-role='prev'>« Prev</button>" +
                        "<span data-role='separator'> </span>" +
                        "<button onclick='"+End()+"' class='btn btn-default' data-role='end'>End tour</button>" +
                    "</div>" +
                "</div>"
                : "<div class='popover tour'>" + 
                    "<div class='arrow'></div>" +
                    "<h3 class='popover-title'></h3>" +
                    "<h3 class='test'>"+tour.getCurrentStep()+"</h3>" +
                    "<div class='popover-content'></div>" +
                    "<div class='popover-navigation'>" +
                        "<button class='btn btn-default' data-role='prev'>« Prev</button>" +
                        "<span data-role='separator'> </span>" +
                        "<button class='btn btn-default' data-role='next'>Next »</button>" +
                        "<button onclick='"+End()+"' class='btn btn-default' data-role='end'>End tour</button>" +
                    "</div>" +
                "</div>"
        );
    },
});
 function End() {
 console.log("test post");
       $('html, body').animate({ scrollTop: 0 }, 'fast');
}
 $("#start-tour").click(function(){
    tour.init();
    tour.start();
    tour.restart();
});
}());

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-tour

【解决方案1】：

我自己设法解决了这个问题，改变了

<button onclick='"+End()+"' class='btn btn-default' data-role='end'>End tour</button>

到

<button class='btn btn-default click_me' data-role='end'>End tour</button>.

我添加了以下代码，而不是 end() 函数：

  $(document).on("click", ".click_me", function() {
        $('html, body').animate({ scrollTop: 0 }, 'fast');
});

【讨论】：