Smooth Scroll Header for Multi-Page Site

Hello,

I’m trying to create the smooth scroll effect for a new website that has more than one page. I’ve done this before with single page sites and I know the steps but for this site it has multiple pages so if I put only <#anchor> it works when I am on the landing page but if I go onto a secondary page and try to click back through the menu it only adds the <#anchor> to the end of the URL which doesn’t work. For example the site has a services page. If I visit the services page and then want to go back to the about section on the home page I get the following url: http://www.<site-name>.com/services/#about instead of http://www.<site-name>.com/#about

I’ve also done this exact process before with another site that had multiple pages but I can’t remember how I got it to work and when I look at the menu on the old site it shows the full url in the custom link box under menu’s as opposed to simply the <#anchor> however, when I try to do this with the new site I lose the smooth scroll effect.

I’ve linked both sites below.