From 3fe08fecba03d0ae3335f30e894daedbc4107cd3 Mon Sep 17 00:00:00 2001 From: Eric Date: Mon, 4 Dec 2023 14:59:26 -0600 Subject: [PATCH] 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. --- .../js/pages/docs/basic-documentation.page.js | 15 +++++++++++---- .../js/pages/handbook/basic-handbook.page.js | 15 +++++++++++---- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js index 7e4371e9c7..8a66b41c73 100644 --- a/website/assets/js/pages/docs/basic-documentation.page.js +++ b/website/assets/js/pages/docs/basic-documentation.page.js @@ -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, + }); } } diff --git a/website/assets/js/pages/handbook/basic-handbook.page.js b/website/assets/js/pages/handbook/basic-handbook.page.js index 7279dec309..4053bf5fd6 100644 --- a/website/assets/js/pages/handbook/basic-handbook.page.js +++ b/website/assets/js/pages/handbook/basic-handbook.page.js @@ -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, + }); } }