0

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)

2
  • Sounds like a javascript issue. Can you provide a public uri? Mar 8, 2018 at 8:02
  • You should first fix the 2 Javascript errors. Second thought: If I click on a menu item the site reloads and some JS fadesIn the content(?). There is a bug in the logic, if you are already on page "Verantwortung" and you click on the second menu item with the anchor link, the site shouldn't reload, just scroll to the anchor. Whoever came up with that script should implement an url check and maybe add support for anchors there too. Mar 8, 2018 at 9:17

1 Answer 1

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.

1
  • Thank you for your information, but as you may have guessed I did not code the entire website, only making slight changes to it. I figured out the code that causes the error, yet I am not very proficient in JS so I'd need further help there
    – Joey
    Mar 8, 2018 at 10:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.