謝潑德旅遊指南JS不滾動

Question

我試圖讓Shepard導遊工作。

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