On-Page Navigation - CSS
Posted: Tue Apr 08, 2025 10:14 am
On-page navigation using anchor links can be useful.
For example, we use this on the product page to remind customers to read the product description before purchase:
app.php/addons/paid_addon/description_link/
However, the default behaviour of scrolling when a link is clicked can be quite jarring, resulting in a 'head bang' when the anchor is reached.
Additionally, the default behaviour will position the anchor at the top of the screen which can be a disaster if a 'sticky' nav bar is used when the anchor will be hidden behind the navbar.
A little bit of CSS can solve both of these:
scroll-behavior: smooth; almost does what it says, that is, the scrolling behaviour will be smooth avoiding that 'head bang'!
scroll-padding-top: 80px; brings the anchor lower so it is never hidden under the navbar. Placing it down from the top of the screen is also just a nicer look than jammed up against the screen top.
Besides using on-page navigation to direct users down the page, the reverse can also be useful to direct them back up from the product description to information at the top of the page.
For example, see this demo on large screens:
https://psiwebsites.com/1100/product_in ... ducts_id=8
Click the link in the product description to go back up the page to show the Date Available.
For example, we use this on the product page to remind customers to read the product description before purchase:
app.php/addons/paid_addon/description_link/
However, the default behaviour of scrolling when a link is clicked can be quite jarring, resulting in a 'head bang' when the anchor is reached.
Additionally, the default behaviour will position the anchor at the top of the screen which can be a disaster if a 'sticky' nav bar is used when the anchor will be hidden behind the navbar.
A little bit of CSS can solve both of these:
Code: Select all
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}scroll-padding-top: 80px; brings the anchor lower so it is never hidden under the navbar. Placing it down from the top of the screen is also just a nicer look than jammed up against the screen top.
Besides using on-page navigation to direct users down the page, the reverse can also be useful to direct them back up from the product description to information at the top of the page.
For example, see this demo on large screens:
https://psiwebsites.com/1100/product_in ... ducts_id=8
Click the link in the product description to go back up the page to show the Date Available.