シェパードツアーガイドJSはスクロールしていません

Question

私はシェパードツアーガイドを働こうとしています。

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

私はscrollToを設定している：真の両方のグローバルと各シェパードツアーストップではなく、ページがどんなジャンプしません。次に例を示します。

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