Question

我在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();
});
}());

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

按下完后，Bootstrap Tour返回顶部

1 个答案: