Angular 5 scrollspy or page scroll feature - issue jumping to section on modal

Question

Has anyone implemented a scrollspy or page scroll feature in Angular 5? I am aiming to create something like this in a modal: https://getbootstrap.com/docs/4.0/components/scrollspy/. However, if I click on the section link on the navbar, the page jumps to localhost:9000/#sectionName ("sectionName" being the id of the section). I need the page to stay on the modal and jump to the appropriate section in the modal. I am not sure what to look into in order to do that. Thanks in advance.

Answer 1

You need to maintain two divs. 1. outer div (main-div) 2. Div which can be scrollable (scrollable-div). Then need to find the div where it should scroll top(sectionName div).

Then it would be easy for you to scroll it finding the scroll top position and use animate to scroll it smoothly.

const masterContainerOffset = $("#main-div").offset().top;

const pos = $("#" + sectionName).offset().top - 80 - masterContainerOffset;
const targetScroll = $("#scrollable-div").scrollTop() + pos;

$("#scrollable-div").animate({
    scrollTop: targetScroll
}, 1000);