时间戳

首页 > 解决方案 > 单击按钮移动到顶部

javascript - 单击按钮移动到顶部

问题描述

我在我的代码中使用 intro.js 来实现演练。我想实现一个场景，在单击完成按钮（.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>

标签： javascriptjquerybuttonclickintro.js

解决方案

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

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 头文件中。如果它不起作用，请分享您的 html 代码。我们会期待

推荐阅读