intro.js点击done按钮实现页面滚动至顶部功能失效问题求助

问题根因 #

你直接给.introjs-donebutton绑定点击事件时，这个元素还没被渲染到页面DOM中——它是intro.js引导流程启动后才动态生成的，所以你写的点击绑定逻辑没有生效。

解决方案 #

推荐优先用intro.js官方提供的完成回调，适配所有引导结束的场景，不需要额外绑定按钮事件，修改后的代码如下：

const intro = introJs();
  
intro.setOptions({
  steps:[
    {
      element:'#featured_apps_2_0',
      intro:'欢迎'
    },
    {
      element:'#myTopnav',
      intro:'快速访问你上下班需要用到的应用和门户'
    },
    {
      element:'.slideshow-container',
      intro:'这里会展示你最关心的内容'
    },
    {
      element:'.card',
      intro:'及时了解热门资讯'
    },
    {
      element:'#stepextra',
      intro:'查看你推荐和收藏的页面'
    },
    {
      element:'#step4',
      intro:'在这里找到推广内容、最新上线资源等信息'
    },
    {
      element:'#essentials2',
      intro:'了解你感兴趣话题的热门动态'
    },
    {
      element:'.col-new-7525',
      intro:'探索你可以使用的福利、工具和新功能'
    }
  ],
  // 新增引导完成回调
  oncomplete: function() {
    $(window).scrollTop(0);
    // 如果需要滚动动画，可以换成下面的写法
    // $('html,body').animate({scrollTop: 0}, 300);
  }
})
  
function callintro(){
  intro.start();
  console.log("引导已启动")
}

如果你确实需要直接绑定完成按钮的点击事件，可以用事件委托的写法，适配动态生成的元素：

// 替换你原来的按钮点击绑定代码即可
$(document).on('click', '.introjs-donebutton', function() {
  $(window).scrollTop(0);
});

内容的提问来源于stack exchange，提问作者user15895653