Navigation link to div id does not behave correctly

Question

What I'm doing

I am currently working on my Menu. I have one Menu-Item which links to a <div> that I have given an <div id="foo">

I link to this id by using the external url option with a link to /subpage#foo


Problem

I came across 2 problems:

1. The link does not work correctly, rather than the top of the screen being the start of the <div> it seems that it actually links "above" the <div> (so the start being on the bottom of the screen)
2. When I'm on this subpage where the link leads to and I press the link to the ID again, the whole site freezes and I can't do anything anymore until I reload the page
   
   
   

For clarification the structure looks like this:

• menu-item (not clickable)
  • subpage
  • subpage#foo
    
    
    

Am I overlooking something or why does it behave like that?


EDIT

Thanks to the comments I figured out the JavaScript code that causes the error, yet I am not very proficient in JS so I do not know what exactly is wrong with it, so here is the code:

<script>
$(document).ready(function() {
  $(".animsition").animsition({
    inClass: 'fade-in',
    outClass: 'fade-out',
    inDuration: 700,
    outDuration: 700,
    linkElement: '.fade-links a',
    linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([href^="mailto"])',
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="/loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});
</script>

EDIT 2

I got it partially fixed by adding :not([href^="/./subpage#foo"]) to the line linkElement.

Partially because now I don't have the freezing problem anymore, yet when I click on the menu item from anywhere other than the subpage, it still doesnt take me to the correct spot.

(So navigating from subpage -> subpage#foo works but otherpage -> subpage#foo doesn't)

Answer 1

Regarding the first point - if you turn off javascript then it jumps to the right place, but the page is shorter and none of the content visible.

This suggests that you are loading some content dynamically after the page has loaded. This additional content will be pushing the layout of the page around and so your scroll position will change.

Personally, I would say you should remove any decorative javascript - a site that has no content visible without javascript could well end up with terrible SEO, and decoration-for-the-sake-of-decoration offers no usability benefit. Styling should really be CSS only - you should have good reason before using javascript for such things.

The freeze will almost certainly be a javascript error.