Anchor Points & Smooth Scroll

Design help General
1

I have set up a page (https://a-p.webflow.io/practice-areas) that uses a large fixed nav to smooth scroll to anchor points. I followed an old forum post to make sure my nav was set to header and fixed. The result is great on the page as the smooth scroll takes into account the navbar and it aligns perfectly.

The problem is when trying to link to an anchor section from a different page. It ignores the navbar and is cut off. is there something that I can do to fix that? A custom script or something to help with an offset when linking from a different page?

Thank you.

2

Hi @milkyway,

Thanks for reaching out for help in this matter.

If you could either provide the password to your site or the share link.

However, if you are using the same fixed navbar on other pages than the homepage, you will need to define the anchor point links in your navigation on those pages, by using this ‘/#anchorpointname’

Hope this helps and good luck.

~Happy Designing

3

Hi @QA_Brandon,

Thanks for responding! Here is the share link: https://preview.webflow.com/preview/a-p?utm_medium=preview_link&utm_source=dashboard&utm_content=a-p&preview=e207ec99d1cc5457e80b6e79b61a65bb&mode=preview.

You can test by going to a page other than the one I provided above, and then clicking one of the practice areas in the footer bar.

Best wishes,
Brandon

4

Hi there,

has your site been published with those anchor points added?

5

It should be. The password to the published site is:

6

I was able to fix it using this custom code I found:

<script>
jQuery ( document ).ready ( function($) {

var hash= window.location.hash

if ( hash == '' || hash == '#' || hash == undefined ) return false;

	    
      var target = $(hash);
    
      headerHeight = 120;
      
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      
      if (target.length) {
        $('html,body').stop().animate({
          scrollTop: target.offset().top - 225 //offsets for fixed header
        }, 'linear');
        
      }

} );
</script>