I'm facing an issue where scrolling to the next element is not working properly. When I click on the next element, it moves there but does not scroll down automatically. I have tried various solutions but have been unsuccessful so far. If anyone can provide assistance in fixing this problem, it would be greatly appreciated. I have already referred to this link https://www.npmjs.com/package/angular-shepherd with no success.
<h2 class="second-element">London</h2>
<p class="third-element">London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<div class="first-element">cool</div>
The following code snippet has been added to my app.component.ts file:
import { ShepherdService } from 'angular-shepherd';
export class AppComponent implements AfterViewInit {
constructor(private shepherdService: ShepherdService) { }
ngAfterViewInit() {
this.shepherdService.disableScroll = true;
this.shepherdService.modal = true;
this.shepherdService.confirmCancel = false;
this.shepherdService.addSteps([
{
id: 'intro',
options: {
attachTo: '.first-element bottom',
beforeShowPromise: function() {
return new Promise(function(resolve) {
setTimeout(function() {
window.scrollTo(0, 0);
resolve();
}, 500);
});
},
buttons: [
{
classes: 'shepherd-button-secondary',
text: 'Exit',
type: 'cancel'
},
{
classes: 'shepherd-button-primary',
text: 'Back',
type: 'back'
},
{
classes: 'shepherd-button-primary',
text: 'Next',
type: 'next'
}
],
classes: 'custom-class-name-1 custom-class-name-2',
highlightClass: 'highlight',
scrollTo: true,
showCancelLink: true,
title: 'Welcome to Rivet Labs',
text: ['This will help you toggle sidebar menu'],
when: {
show: () => {
console.log('show step');
},
hide: () => {
console.log('hide step');
}
}
}
},
{
// Enter second ID here
},
{
// Enter third ID here
}
}