Shepard导游JS不滚动

Question

我正在努力让Shepard导游工作.

http://github.hubspot.com/shepherd/docs/welcome/

我已经在全局和每个Shepard巡回站点设置了scrollTo:true,但无论如何页面都会跳转.这是一个例子:

http://codepen.io/anon/pen/mRvdKv

(function() {
var tour = new Shepherd.Tour({
  defaults: {
    classes: 'shepherd-theme-square',
    scrollTo: true
  }
});

tour.addStep('example', {
  title: 'Example Shepherd',
  text: 'This is the first step',
  attachTo: '#test1 bottom',
  advanceOn: '.docs-link click',
  scrollTo: true
});

tour.addStep('example', {
  title: 'Example Shepherd',
  text: 'This is the second step',
  attachTo: '#test2 bottom',
  advanceOn: '.docs-link click',
  scrollTo: true
});

tour.addStep('example', {
  title: 'Example Shepherd',
  text: 'This is the third step',
  attachTo: '#test3 top',
  advanceOn: '.docs-link click',
  scrollTo: true
});

tour.start();
})();

我只是缺少一些明显的东西吗？

Answer 1

我认为你期待顺利滚动元素而不是立即跳转？Shepherd使用DOM API Element.scrollIntoView()来实现scrollTo.这不是一个平滑的滚动.您可以添加自己的scrollToHandler.例如,使用jQuery,您可以将构造函数调用更改为:

var tour = new Shepherd.Tour({
      defaults: {
        classes: 'shepherd-theme-square',
        scrollTo: true,
        scrollToHandler: function(e) {
          $('html, body').animate({
              scrollTop: $(e).offset().top
          }, 1000);
        }
      }
    });

然后这将进行动画滚动.(顺便说一下,有很多方法可以进行动画滚动.重点是展示如何注册这些方法之一.)

http://codepen.io/anon/pen/YNByJJ