Question

所以，问题在于每次我的封面/模态出现在我的网站上时，它往往会使网站跳回到顶部。我想这里是模拟问题的说明，所以你可以看到它：

转到此链接：http://jsbin.com/saditujuli/edit?html,css,js,output
点击＆＃39;使用JS运行＆＃39;在右上角。滚动到底部＆＃39;输出＆＃39;部分并点击位置：固定，蓝色自动收报机右上角。
从那里，您可以看到网站从半透明封面背景后面跳转，您也可以告诉您退出（封面，模态）网站回到顶部，所以它跳了起来。

当盖子出现时，它应该是位置：固定，以便它不会移动。当点击蓝色自动收报机而不是跳跃时，它应该留在原地，但是我不会这样做。知道如何解决它。感谢任何帮助。谢谢！

Answer 1

如果您尝试将容器位置更改为固定，该怎么办？

position:fixed;

Answer 2

如果这是您的原始代码：

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

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

我将'.container'改为'body'，'position：fixed / relative'改为overflow-y：hidden / scroll'，如下所示：

  $('.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');
  });

这会阻止背景跳回到顶部和背景滚动，同时蓝色自动收录器重叠。

编辑：对于移动设备，尝试添加window.ontouchmove = preventDefault; 像这样：

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

并在关闭对话框时将'preventDefault'更改为'null'。

Answer 3

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

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

更改容器位置：绝对

让网站退出跳到页面顶部

3 个答案: