Anchor links are a convenient way to send people directly to the content they’re looking for. However, if you have a fixed header, things quickly become a problem as the content is now hidden behind the sticky header.
If you’re writing your own code, you can easily use CSS to get around this. Check out this StackOverflow thread.
The issue comes when you’re using a pre-built system that you have less control over the code. Like Beaver Builder for example. In this case, editing the code isn’t really isn’t the right answer.
You can, however, make everything work out right with a little jQuery.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Adapted from http://stackoverflow.com/questions/30293784/smooth-scroll-to-anchor-after-loading-new-page | |
| NERD.ScrollToHashFix = { | |
| init: function () { | |
| // to top right away | |
| if ( window.location.hash ) scroll(0,0); // void some browsers issue | |
| setTimeout( function() { scroll(0,0); }, 1); | |
| $(function() { | |
| // *only* if we have anchor on the url and if it exists on the page. | |
| if($(window.location.hash).length) { | |
| var hashPos = $(window.location.hash).offset().top; | |
| var headerOffset = 100; | |
| var scrollPos = hashPos – headerOffset; | |
| // smooth scroll to the anchor id | |
| $('html, body').animate({ | |
| scrollTop: scrollPos + 'px' | |
| }, 1000, 'swing'); | |
| } | |
| }); | |
| } | |
| }, | |
| $(window).load(function(){ // wait for the site to finish loading first. | |
| NERD.ScrollToHashFix.init(); | |
| }); |
What this code is doing is first detecting if there is a hash in the URL. If so, does that hash exist on the page? If yes, then find the position, remove 100 pixels, and then scroll to that spot on that page. Removing 100 pixels means that the spot it scrolls to will be behind the fixed header and the content they really want to read will be front and center.
This code has been sent to Beaver Builder in hopes that they integrate it into their codebase, but I’m sure there are other systems that could benefit from this as well.
