Question

我试图让Shepard导游工作。

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

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

(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

Shepard导游JS不滚动

1 个答案: