Make Website Quit Jumping to the Top of Page

Question

So, the problem is that every time my cover/modal shows up on my website it tends to make the website jump back to top.I want Here are instructions to emulate the problem ,so you can see it:

Go to this link: http://jsbin.com/saditujuli/edit?html,css,js,output
Click 'Run with JS' in top right corner. Scroll to the bottom of the 'output' section and click the position:fixed , blue ticker in the
top right corner.
From there, you can see the website jump from behind the semi-transparent cover background and you can also tell that when you exit the (cover,modal) the website is back at the top ,so it jumped.

When the cover comes up,it is supposed to be position:fixed so that it won't move.It is intended to stay in place when the blue ticker is clicked instead of jumping ,but I don't know how to fix it.Any help is appreciated.Thanks in advance!

score 1 · Answer 1 · answered Aug 25 '16 at 01:03

1

What if you try to change the container position to fixed?

position:fixed;

answered Aug 25 '16 at 01:03

evilrod

77
1
1
10

That would just make the content not move. Look at example of problem here: http://jsbin.com/saditujuli/edit?html,css,js,output – Kaleb Meeks Aug 25 '16 at 01:31
i thought that is what he want – evilrod Aug 25 '16 at 02:06

Jay Gardiner · Answer 2 · 2016-08-25T02:01:02.627

0

If this is your original code:

$('.responsive_click').on('click',function(){
        $('.cover').fadeIn('slow');
        $('.container').css('position','fixed');
    });

    $('.close-sign').on('click',function(){
        $('.cover').fadeOut('slow');
        $('.container').css('position','relative');
    });

I changed '.container' to 'body' and 'position: fixed/relative' to overflow-y: hidden/scroll' as seen here:

  $('.responsive_click').on('click',function(){
    $('.cover').fadeIn('slow');
    $('body').css('overflow-y','hidden');
  });

  $('.close-sign').on('click',function(){
    $('.cover').fadeOut('slow');
    $('body').css('overflow-y','scroll');
  });

This stops the background jumping back to the top and background scrolling while the blue-ticker overlay is down.

EDIT: For mobile, trying adding window.ontouchmove = preventDefault; like so:

  $('.responsive_click').on('click',function(){
    $('.cover').fadeIn('slow');
    $('body').css('overflow-y','hidden');
    window.ontouchmove = preventDefault;
  });

and just change 'preventDefault' to 'null' when closing the dialog box.

edited Aug 25 '16 at 02:01

answered Aug 25 '16 at 01:03

Jay Gardiner

1
2

That fixed the jump problem on mobile and pc but on mobile now it is still scrolling instead of being position:fixed when the cover comes up. – Kaleb Meeks Aug 25 '16 at 01:18
You could try using the mobile edits I added onto my answer. – Jay Gardiner Aug 25 '16 at 02:17
I updated the jquery using your way ,but I need help in undoing the preventDefault() and stopPropagation() when the exit button is clicked so the website will return to normal. http://jsbin.com/saditujuli/edit?html,css,js,output – Kaleb Meeks Aug 25 '16 at 23:16
Does the window.ontouchmove = null; inside the close function not return the website back to normal? – Jay Gardiner Aug 26 '16 at 00:23
I need the answer in jquery form like the form provided on the example. If I put your code in the website, it tends to not work because of format reasons. – Kaleb Meeks Aug 26 '16 at 02:10
Can't you just copy the code from my example above? That should keep the formatting which is the same as you used. – Jay Gardiner Aug 26 '16 at 02:29

score 0 · Answer 3 · answered Aug 25 '16 at 07:19

$('.responsive_click').on('click',function(){
    $('.cover').fadeIn('slow');
    $('.container').css('position','absolute');
  });

  $('.close-sign').on('click',function(){
    $('.cover').fadeOut('slow');
    $('.container').css('position','relative');
  });

Change container position: absolute

Make Website Quit Jumping to the Top of Page

3 Answers3