mirror of
https://github.com/fleetdm/fleet
synced 2026-05-22 16:39:01 +00:00
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:
parent
9b40573f54
commit
3fe08fecba
2 changed files with 22 additions and 8 deletions
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue