First post, hope this is the right subforum, otherwise please remove or relocate.
I have a bit of a problem and I can't seem to find the answer.
I'm trying to create a simple anchor scroll, the website only consists of one page with multiple sections. I gave each section an id (#about, #contact, #imprint,...you get the idea). I use my own menu (i put the laytheme menu on display=none;) and I use a common menu structure:
<ul>
<li><a href="#about">About</a></li>
<li><a href="#imprint">Imprint</a></li>
...
</ul>
When I load the page everything is normal (different background colors for the different sections, different texts...), but when I click on a menu point the page turns white, the contents and the styling is gone, but it still scrolls to the right point on the page (i can see it by looking at the scrollbar). If I reload the same URL it appears again but as soon as i click the menu it turns blank again.
Is there something I am missing? The links should be correct since it is the same page.
I tried a code snippet I found here for debugging purposes:
<script>
window.laytheme.on('newpageshown', function(){
if(window.location.hash.length > 0){
var id = window.location.hash;
if(jQuery(id).length > 0){
jQuery('html, body').animate(
{ scrollTop: jQuery(id).offset().top },
{ duration: 1200 });
}
}
});
</script>
If I type in the complete url with the /#about at the end it scrolls to this point like it's supposed to but again if I click the menu it turns white but still scrolls to the right point.
Does anyone have an idea?