单击按钮移动到顶部

Question

我在我的代码中使用 intro.js 来实现演练。 我想实现一个 sceanrio，点击完成按钮（.introjs-donebutton）页面应该滚动到顶部但是使用这段代码它没有发生。 谁能帮我解决这个问题？

 //$('.col-new-four').attr('id','essentials'); const intro = introJs(); intro.setOptions({ steps:[ { element:'#featured_apps_2_0', intro:'welcome' }, { element:'#myTopnav', intro:'Quickly access the apps and portals you need on and off the clock.' }, { element:'.slideshow-container', intro:'This space features topics you care about the most.' }, { element:'.card', intro:'Stay up-to-date on trending stories.' }, { element:'#stepextra', intro:'View your recommended and favorite pages.' }, { element:'#step4', intro:'Find promotional content, latest additions and more here.' }, { element:'#essentials2', intro:'Learn about what's trending with your favorite topics.' }, { element:'.col-new-7525', intro:'Explore benefits, tools and new features available to you.' } ] }) $('.introjs-donebutton').click(function() { $(window).scrollTop(0); }); function callintro(){ intro.start(); console.log("called intro") }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.2.2/intro.min.js"></script>

Answer 1

我假设您想在单击按钮时将客户端视图页面滚动到顶部。 如果是这样，您可以使用此代码

HTML

<div class="button-parent">
   <button type="button" class="button-to-top">Click Here</button>
</div>

jQuery

$(document).ready(function () {
    $('.button-to-top').on('click', function () {
        $('body').scrollTop(0);
    });
});

不要忘记将 jQuery cdns 添加到您的 html header 文件中。 如果它不起作用，请分享您的 html 代码。 我们会期待

Answer 2

使用纯javascript，无框架

window.scrollTo({ top: 0, behavior: 'smooth' })

Answer 3

所以我使用了它并且它开始运行良好，原因是按钮是在初始页面加载后动态创建的，所以这应该可以工作

  $(document).on("click", ".introjs-donebutton", function(){
    $(document).scrollTop(0);
  })

Answer 4

function upsideItem() { 
    $(document).ready(function(upsideItem) { 
        $('.button-to-top').on('click', function(upsideItem) { 
            console.log(button-to-top) 
            $('body').scrollTop(0);
        });
    });
}