Missed Bookmark Targets

..but I need to manually scroll up to get to the correct position? 

You can put a hidden bookmark anchor in order to scroll directly to your actual expected position.
eg:

<a id="software"></a>

Select allOpen in new window

I have replaced all <a name= with <a id=, but the issue persists.

I can't access your page as mentioned - https://www.aces-project.com/index.php/services/#software

It could be a duplicate id listed currently in your source code.

Can you screenshot the position that you mentioned need to scroll manually until to the targeted section?

Why can't you access it? Do you get any error?

What about https://www.aces-project.com/index.php/services#software

When I go to the link, it immediately jumps to:

... But, it should be higher up

Now, I can view it directly to the bookmark section.
Maybe your browser cache issue? Try to check your result in Chrome incognito version or a different browser.

Alternatively, you can use scrollIntoView method to resolve this bookmark feature.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
   GoToBookmark();
});

function GoToBookmark(){
  if(window.location.hash!=''){
    console.log('Go to bookmark :'+window.location.hash);
  
    $("'"+window.location.hash+"'").scrollIntoView();
  }   
}
</script>

Select allOpen in new window

Testing sample: Testbookmark.html

What happens if you add a non impactive parameter to the query?

https://www.aces-project.com/index.php/services/?123#software

Does it still not work?
If the above works then you potentially have a caching issue.

@Julian - https://www.aces-project.com/index.php/services/?f#software goes to the same.

The funny thing is that all bookmarks work properly on Chrome & Safari on my iPhone,  but they are off on all Desktop browsers. I'm wondering if the culprit is in the static header:


As well, I have installed and ran the Clear Cache for Me plugin, but the issue persists.

Finally, you will se that in the console, the scrollIntoView is throwing an error :


Please note, as $ is ambiguous in WP, I've assigned jq = jQuery;

Hi APD Toronto, try this native javascript instead.

function GoToBookMark(){
  if(window.location.hash!=''){
    console.log('Go to bookmark :'+window.location.hash);
  
    let el = document.querySelector("'"+window.location.hash+"'");
    el.scrollIntoView();
  }   
}

Select allOpen in new window

You may consider set a timer to auto-force to scroll to the bookmarklet section if doesn't work.

setTimeout(GoToBookMark, 100);

Select allOpen in new window

Not sure why JavaScript is an option here. There is something else going on - only you seem to be having the problem - which means
a) There is something specific to your enviornment
b) We are not understanding your problem correctly
a) Is unlikely given you have tried cross browser - that takes the Cache out of the equation - so lets go with B.

The issue of it not scrolling to the bookmark - is it not scrolling at all
OR
Is the issue that the fixed header is obscuring the Software heading when it does scroll.

If this is the case then this is a known issue with fixed headers and the trick is to add a negative margin (equal to the header height) and positive padding (equal to the heading height) to the element with id you are scrolling to.

In this case that would mean

#software {
  margin-top: -90px;
  padding-top: 90px;
}

Select allOpen in new window

Ideally you would want to do this with a class so you can apply it to other scrollTo points.

Note you need to apply the above to the element that has the id you are scrolling to.

If this is not your problem then let us know a bit more about what you are experiencing.

@Julian - can you please provide a screenshot of what you see immidiately when you go to:

https://www.aces-project.com/index.php/services#software

or

https://www.aces-project.com/index.php/services#hosting 

or

https://www.aces-project.com/index.php/services#rescue

Here is a grab of the first link. As you can see the Software heading is cutoff as it is under the fixed header - but the bookmark is working. The issue here is that the page has a header that is position:fixed and the page is scrolling so that Software is at the top (under the heading). The styling above fixes this.

Your issue is the fixed header. When you give an element position: fixed; it is removed from the flow of the document. Imagine it's be lifted above everything and now the rest of the site will continue to flow under it. Since the anchor uses the browser window to position it's doing it job perfectly, however, your fixed menu is obscuring it.

Julian's solution should work. In order to capture them all at once, you'll want to give each heading the same class.

ok, in this case, how can I add a script to scroll up 90px?

Why do you want to?
Just use the CSS solution I gave you. This is a common issue and the solution is as I described above.

JavaScript is not the right solution here.

The CSS helped, but it disabled clicking on the button links, like Case Studies and Website Design?

It didn't disable. Your padding for the Heading element is now on top of the buttons. You're going to have to play with your CSS a little to move the button above the padding.


You have a <p>&nbsp;</p> at the bottom of each service section, why remove that and add bottom and top padding to the sections with the class="divServices" instead? Then the top padding will push the heading down and the bottom padding will push the button up. There won't be any elements overlapping.