diff --git a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx index e5613af0320..fda900d65ab 100644 --- a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx +++ b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx @@ -142,6 +142,10 @@ export const JumpLinks: React.FunctionComponent = ({ return; } const scrollPosition = Math.ceil(scrollableElement.scrollTop + offset); + // Take into account the last section not having enough content to trigger a scroll position; without + // checking if at the bottom of the scroll container, the last JumpLinksItem never becomes "active". + const isAtBottom = + Math.ceil(scrollableElement.scrollTop + scrollableElement.clientHeight) >= scrollableElement.scrollHeight; window.requestAnimationFrame(() => { let newScrollItems = scrollItems; // Items might have rendered after this component or offsetTop values may need @@ -153,6 +157,11 @@ export const JumpLinks: React.FunctionComponent = ({ setScrollItems(newScrollItems); } + if (isAtBottom) { + const lastIndex = newScrollItems.length - 1; + return setActiveIndex(lastIndex); + } + const scrollElements = newScrollItems .map((e, index) => ({ y: e ? e.offsetTop : null, diff --git a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksScrollspy.tsx b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksScrollspy.tsx index bd636cbd743..f51bb663a60 100644 --- a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksScrollspy.tsx +++ b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksScrollspy.tsx @@ -72,7 +72,7 @@ export const JumpLinksScrollspy: React.FunctionComponent = () => { isVertical={isVertical} isCentered={!isVertical} label="Jump to section" - scrollableSelector=".pf-v6-c-page__main-container" + scrollableSelector=".pf-v6-c-page__main" offset={offsetHeight} expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }} isExpanded