Website: Handle scrolling to in-page links when query parameters are provided. (#15423)

Closes: #15415

Changes:
- Updated the documentation and handbook page scripts to navigate users
who visit a URL with a hash link with query parameters attached to the
correct section.
This commit is contained in:
Eric 2023-12-04 14:59:26 -06:00 committed by GitHub
parent 9b40573f54
commit 3fe08fecba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 8 deletions

View file

@ -108,11 +108,18 @@ parasails.registerPage('basic-documentation', {
// Handle hashes in urls when coming from an external page.
if(window.location.hash){
let possibleHashToScrollTo = _.trimLeft(window.location.hash, '#');
let hashToScrollTo = document.getElementById(possibleHashToScrollTo);
// If a hash was provided, we'll remove the # and any query parameters from it. (e.g., #create-an-api-only-user?utm_medium=fleetui&utm_campaign=get-api-token » create-an-api-only-user)
// Note: Hash links for headings in markdown content will never have a '?' beacause they are removed when convereted to kebab-case, so we can safely strip everything after one if a url contains a query parameter.
let possibleHashToScrollTo = _.trimLeft(window.location.hash.split('?')[0], '#');
let elementWithMatchingId = document.getElementById(possibleHashToScrollTo);
// If the hash matches a header's ID, we'll scroll to that section.
if(hashToScrollTo){
hashToScrollTo.scrollIntoView();
if(elementWithMatchingId){
// Get the distance of the specified element, and reduce it by 90 so the section is not hidden by the page header.
let amountToScroll = elementWithMatchingId.offsetTop - 90;
window.scrollTo({
top: amountToScroll,
left: 0,
});
}
}

View file

@ -52,11 +52,18 @@ parasails.registerPage('basic-handbook', {
// Handle hashes in urls when coming from an external page.
if(window.location.hash){
let possibleHashToScrollTo = _.trimLeft(window.location.hash, '#');
let hashToScrollTo = document.getElementById(possibleHashToScrollTo);
// If a hash was provided, we'll remove the # and any query parameters from it. (e.g., #create-an-api-only-user?utm_medium=fleetui&utm_campaign=get-api-token » create-an-api-only-user)
// Note: Hash links for headings in markdown content will never have a '?' beacause they are removed when convereted to kebab-case, so we can safely strip everything after one if a url contains a query parameter.
let possibleHashToScrollTo = _.trimLeft(window.location.hash.split('?')[0], '#');
let elementWithMatchingId = document.getElementById(possibleHashToScrollTo);
// If the hash matches a header's ID, we'll scroll to that section.
if(hashToScrollTo){
hashToScrollTo.scrollIntoView();
if(elementWithMatchingId){
// Get the distance of the specified element, and reduce it by 90 so the section is not hidden by the page header.
let amountToScroll = elementWithMatchingId.offsetTop - 90;
window.scrollTo({
top: amountToScroll,
left: 0,
});
}
}