编辑：

Question

我正在使用可爱的pace.js作为我的页面加载器。

我在加载过程完成时创建了一个#cover来隐藏所有内容。

#cover{
position:fixed;
top:0;
left:0;
background:#000;
z-index:99999;
width:100%;
height:100%
}

所有我想要的，当加载完成时，是向上滚动的封面和要遵循的内容。因此，内容将从页面底部向上滑动。

这个Javascript让封面向上滚动问题是第二部分=从页面底部开始跟随的主体

$(window).load(function() {
    Pace.on('done', function() {
    $("#cover").slideUp(700);
    });
});

这个网站是我想要在加载方面实现的： http://www.ok-rm.co.uk

有任何帮助吗？感谢。

馈。

Answer 1

您可以尝试这种方法：

＆＃13;

$("body").on("click", function(){
	$(this).toggleClass("slideup")
});

＆＃13;

html, body {padding:0; margin:0; height:100%;}

#cover {
  position:fixed; top:0; left:0; z-index:1;
  background:#000; color:#FFF;
  width:100%; height:100%;
  transition:.3s;
}

#body {
  transition:.3s;
  position: relative;
  top:100%;
}

body {overflow:hidden;} /* hide scrollbar by default */
body.slideup {overflow:auto;} /* show scrollbar after loading */
body.slideup #cover {top:-100%;} /* slide #cover up */
body.slideup #body {top:0;} /* slide #body up */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="cover">Loading Content</div>

<div id="body">
  <h1>Hello Universe</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem dicta suscipit aliquam aperiam rerum libero id non nulla, voluptatibus, ullam omnis voluptatem ab amet ipsa. Alias deserunt magni tempore.</p>
  <p>Voluptate reiciendis in tempora repudiandae, repellat odit eligendi quis. Obcaecati voluptatem eveniet, maiores, dolore modi officiis nesciunt itaque. Perferendis odit porro aperiam, mollitia repudiandae cupiditate, alias ipsa architecto adipisci magni?</p>
  <p>Soluta minima officia provident beatae similique qui nam in facilis, quibusdam. Pariatur odio qui repellendus tenetur quae aperiam molestias eum exercitationem ipsa veniam, doloribus id temporibus doloremque, sapiente facere, cum.</p>
  <p>Inventore officia corporis cumque, eius id quam cupiditate tempora unde, beatae ipsum optio sint expedita modi atque esse exercitationem assumenda quasi nostrum corrupti obcaecati, culpa ea ipsa. Delectus, eum, repellat.</p>
  <p>Reiciendis debitis doloribus aliquam nesciunt dolorem repellendus. Iste, ducimus. Nostrum necessitatibus soluta, impedit laborum quam eaque accusamus error illo iste reiciendis, veniam facilis repudiandae! Iste, accusantium autem corrupti magnam aut!</p>
</div>

＆＃13;

逻辑/说明：

基本的HTML结构如下：

body＆gt; #cover + #body

其中#cover是加载占位符，＃body是包含所有内容的div。默认情况下，#cover覆盖整个视口，＃body有一个顶部偏移量。加载后，#cover向上移动负顶部偏移量，＃body通过移除负偏移量向上滑动。

为了演示，我点击了效果。这些更改依赖于CSS transition，它通过类切换而不是JavaScript / jQuery滑动功能来更改顶部偏移。

在您的情况下，加载代码将是：

$(window).load(function() {
    Pace.on('done', function() {
    $("body").addClass("slideup");
    });
});

Answer 2

我不明白您使用position: fixed的原因，只需将#cover元素放在页面的第一个元素中，然后添加overflow: hidden属性的body类，然后slideUp()之后完成删除课程。希望这有助于查看：jsfiddle

编辑：

以下方法是#cover向上滑动，内容如下：jsfiddle

当“完成”时身体向上滚动

2 个答案:

编辑：