Closing a div moves the page up

Question

I'm making a page where you can open and close descriptions. The page works perfectly on firefox, but on other browser like Chrome, the page seems to go up as you open and close the other divs.

EDIT: the page goes up when I close a menu under another one. But not the other way. here is a link so you can see what is happening with chrome: https://imgur.com/a/4zgrzc0

I suppose the problem is $(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); How can I avoid that? Thanks a lot.

 $(document).ready(function(){ $(".exposition").on('click',function(){ var hello = $(this).attr('data-id'); $('.photos-evenements').hide(); $('[id='+ hello + ']').show(); }); }); $( document ).ready(function(open) { $('.sub-menu ul').hide(); $('.sub-menu a').click(function () { $(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); // to hide all ul expect this one $(this).parent('.sub-menu').children('ul').slideToggle(200); }); $('.sub-menu a').click(function(open) { open.preventDefault(); }); });

 .photos-evenements{ display:none; max-width: 100%; max-height: 90vh; }.exemple { height:100vh; background-color:lavender; }

 <div class="exemple">hi</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="menu"> <li class='sub-menu'> <a href='#' class="exposition" data-id="divId1">1</a> <ul> <li> When opened, i'm a description, I'm not supposed to move the page when opened or closed. </li> </ul> </li> <li class='sub-menu'> <a href='#' class="exposition" data-id="divId2">2</a> <ul> <li> I'm supposed to close 1 and don't move the page up </li> </ul> </li> </ul> <div class="exposition"> <div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/Performances%20OK.jpg" data-id="divId1"/></div> <div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/333_3.png" data-id="divId1"/></div> <div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/333_1.png" data-id="divId1"/></div> </div> <div class="exposition"> <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/Performances%20OK.jpg" data-id="divId2"/></div> <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/333_3.png" data-id="divId1"/></div> <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/333_1.png" data-id="divId1"/></div> </div> </div>

Answer 1

I believe that what you are witnessing is aggressive scroll anchoring from Chrome. For some reason Chrome is anchoring the scroll on the link you clicked, while Firefox is anchoring it on some other element, possibly the container or preceding div.

It's not clear, to me at least, why there's a difference in behaviour or which is 'correct'. In any case you should be able to resolve your issue by simply disabling scroll anchoring within the menu container. To do this we can use the overflow-anchor property on the element where we want to disable scroll anchoring.

In the example you have given we would simply add the following code to the CSS

.sub-menu{
   overflow-anchor:none
}

This should fix the issue.

I have edited your example in the snippet below to include this (I also tidied the code up slightly to make it clearer). I have tested this in both Firefox and Chrome and the jumping of the page seems to be gone.

Obviously you will have to change what you set the overflow-anchor:none property on for different scripts with different class names. One approach would be to just disable scroll anchoring for the entire document by setting it on the body.

body{
   overflow-anchor:none
}

Be warned however, that scroll anchoring was introduced to counteract the very disruptive experience of what the user is currently looking at being moved unexpectedly by changes elsewhere on the document. It would be best to only disable it in select areas if possible.

 $(document).ready(function(){ $(".exposition").on('click',function(){ var hello = $(this).attr('data-id'); $('.photos-evenements').hide(); $('[id='+ hello + ']').show(); }); }); $( document ).ready(function(open) { $('.sub-menu ul').hide(); $('.sub-menu a').click(function () { $(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); // to hide all ul expect this one $(this).parent('.sub-menu').children('ul').slideToggle(200); }); $('.sub-menu a').click(function(open) { open.preventDefault(); }); });

 .example { height:100vh; background-color:lavender; }.sub-menu { overflow-anchor:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="example">Space above</div> <ul class="menu"> <li class='sub-menu'> <a href='#' class="exposition" data-id="divId1">1</a> <ul> <li> When opened, i'm a description, I'm not supposed to move the page when opened or closed. </li> </ul> </li> <li class='sub-menu'> <a href='#' class="exposition" data-id="divId2">2</a> <ul> <li> I'm supposed to close 1 and don't move the page up </li> </ul> </li> </ul> <div class="example">Space below</div>

Answer 2

Revised answer

I think this might be a simple minimum height issue for that page. By reserving the space for the hidden content, you can avoid the jump

I made a codesandbox to demonstrate the issue and the height on the list can be tweaked - remove the border when you are happy.

https://codesandbox.io/s/sleepy-currying-6vtsy?file=/index.html:467-489

Answer 3

Not exactly sure what you're trying to do, but you might try the following:

$(document).on('click', '.sub-menu a', function (e) {
     e.preventDefault()
     e.stopPropagation()

     $(this).parents('.sub-menu').siblings().find('ul').slideUp('fast');
     $(this).parents('.sub-menu').children('ul').slideToggle(200);
  });

It's good practice to bind events to the document instead of a specific element in case you might end up loading data through AJAX in the future.

Anyhow , I usually achieve the thing you're looking for by defining the CSS for the element, in your case.sub-menu ul, to:

.sub-menu ul{
   max-height:0vh; // To hide sub-menu <ul> contents
   overflow:hidden;
   transition:500ms ease; // For fancy smooth opening and closing  [1/2]
   transition:max-height 500ms ease; // Alternative, more specific [2/2]
}

.sub-menu.active ul{
   max-height:100vh;  // or any height you expect it to never exceed.
}

Then - with jQuery - you can do the following:

$(document).on('click', '.sub-menu a', function(e){
  e.preventDefault();
  $(this).parents('.sub-menu').addClass('active')
  $(this).parents('.sub-menu').siblings().removeClass('active')
})