link to section replaces url with wrong id when section above is not visible anymore

[Anspitzen]

Describe the bug
When going to for example Layout - Breakpoints it jumps correctly to the section breakpoints. But the url points to the next section, Usage, after finishing automatic scrolling. So on reload you end up on wrong section. Correct url is only shown when scrolling up so text from above is visible (previous section content)

To Reproduce
Steps to reproduce the behavior:

1. Go to page
2. F5 / reload
3. See error
4. Scroll up and see correct url getting inserted when full block + somehting on top is visible
5. Click on the Link icon next to the section headline and see scrolling to align top of viewprot with headline and then again wrong url

Expected behavior
URL does not get replaced until the block is really going out of view

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version latest

Additional context
Does also happen on other points with sections to jump to, not only the breakpoints

[akorchev]

Indeed this is the current behaviour when more than one section is determined to be visible at a time. We are open to suggestions for improvement. The relevant code is here:

radzen-blazor/Radzen.Blazor/wwwroot/Radzen.Blazor.js

Lines 2577 to 2607 in b98dffd

	const center = (container.tagName === 'HTML' ? 0 : container.getBoundingClientRect().top) + container.clientHeight / 2;
	let min = Number.MAX_SAFE_INTEGER;
	let match;
	for (let i = 0; i < elements.length; i++) {
	const element = elements[i];
	if (!element) continue;
	const rect = element.getBoundingClientRect();
	const diff = Math.abs(rect.top - center);
	if (!match && rect.top < center) {
	match = selectors[i];
	min = diff;
	continue;
	}
	if (match && rect.top >= center) continue;
	if (diff < min) {
	match = selectors[i];
	min = diff;
	}
	}
	if (match !== currentSelector) {
	currentSelector = match;
	this.navigateTo(currentSelector, false);
	ref.invokeMethodAsync('ScrollIntoView', currentSelector);
	}

[Anspitzen]

So current behaviour:
Section in Url is the lowest element.top above (vertical) center of viewport
One easy way to do would be moving that "center" line up, like lowest headline visible above the top quarter of viewport

One other way would be chcking if the previous element is still fully visible on page and then not taking any the new url/match closer to center.
Take the top most still visible rect.top (which is above center) as section:

const contTop = container.tagName === 'HTML' ? 0 : container.getBoundingClientRect().top;
const center = contTop + container.clientHeight / 2; 
  
 let min = Number.MAX_SAFE_INTEGER; 
 let match; 
  
 for (let i = 0; i < elements.length; i++) { 
   const element = elements[i]; 
   if (!element) continue; 
  
   const rect = element.getBoundingClientRect(); 
  
   if (!match && rect.top < center) { 
     match = selectors[i]; 
     min = rect.top; 
     continue; 
   } 
  
   if (match && rect.top >= center) continue; 
   
   if (match && (min < contTop || rect.top < min && rect.top >= contTop)) { 
     match = selectors[i]; 
     min = rect.top; 
   } 
 } 
  
 if (match !== currentSelector) { 
   currentSelector = match; 
   this.navigateTo(currentSelector, false); 
   ref.invokeMethodAsync('ScrollIntoView', currentSelector); 
 } 

in words: If the previous match is above center (because the other two ifs) and either the previous match top is outside of container OR current rect is closer to top of container than the previous
Then take the new section. So topmost headline visible above center of container is the active section

Edit for edge case of two or more sections above center at the start an no possibility to scroll (page starts with two really short sections and fits completely on screen): Here the scroll will always take the first section as it can't go out of view. But at the same time the function will never run as there is no scroll and any link to the section will be visible anyways on page when jumpging to link with section

[akorchev]

Hi @Anspitzen,

Feel free to submit a pull request with the suggested improvement.