点击显示网站
Show site on click
我试着做一个像http://html5up.net/overflow这样的网站，我真的不喜欢的一件事是，你可以在点击"按预期进行"按钮之前向下滚动。对我来说，这有点违背了按下按钮让它滚动的意义，如果你可以手动向下滚动的话。
我的问题是，是否有一种方法可以使页面的其余部分只显示当你按下按钮，所以用户被迫按下按钮，看到自动滚动之前，他可以看到网站的其余部分。
我希望下一个按钮也一样"act on this message"
任何帮助都是感激的。
这是代码
<body>
<!-- Header -->
<section id="header">
<header>
<h1>Overflow</h1>
<p>By HTML5 UP</p>
</header>
<footer>
<a href="#banner" class="button style2 scrolly scrolly-centered">Proceed as anticipated</a>
</footer>
</section>
<!-- Banner -->
<section id="banner">
<header>
<h2>This is Overflow</h2>
</header>
<p>A brand new site template designed by <a href="http://n33.co">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a>.<br />
It’s fully responsive, built on <a href="http://skeljs.org">skelJS</a>, and of course entirely free<br />
under the <a href="http://html5up.net/license/">Creative Commons license</a>.</p>
<footer>
<a href="#first" class="button style2 scrolly">Act on this message</a>
</footer>
</section>
<!-- Feature 1 -->
<article id="first" class="container box style1 right">
<a href="http://ineedchemicalx.deviantart.com/art/Time-goes-by-too-fast-335982438" class="image full"><img src="images/pic01.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Lorem ipsum<br />
dolor sit amet</h2>
</header>
<p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.</p>
</div>
</article>
<!-- Feature 2 -->
<article class="container box style1 left">
<a href="http://ineedchemicalx.deviantart.com/art/Kingdom-of-the-Wind-348268044" class="image full"><img src="images/pic02.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Mollis posuere<br />
lectus lacus</h2>
</header>
<p>Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. Etiam egestas scelerisque ac duis magna lorem ipsum dolor.</p>
</div>
</article>
<!-- Portfolio -->
<article class="container box style2">
<header>
<h2>Magnis parturient</h2>
<p>Justo phasellus et aenean dignissim<br />
placerat cubilia purus lectus.</p>
</header>
<div class="inner gallery">
<div class="row flush">
<div class="3u"><a href="images/fulls/01.jpg" class="image full"><img src="images/thumbs/01.jpg" alt="" title="Ad infinitum" /></a></div>
<div class="3u"><a href="images/fulls/02.jpg" class="image full"><img src="images/thumbs/02.jpg" alt="" title="Dressed in Clarity" /></a></div>
<div class="3u"><a href="images/fulls/03.jpg" class="image full"><img src="images/thumbs/03.jpg" alt="" title="Raven" /></a></div>
<div class="3u"><a href="images/fulls/04.jpg" class="image full"><img src="images/thumbs/04.jpg" alt="" title="I'll have a cup of Disneyland, please" /></a></div>
</div>
<div class="row flush">
<div class="3u"><a href="images/fulls/05.jpg" class="image full"><img src="images/thumbs/05.jpg" alt="" title="Cherish" /></a></div>
<div class="3u"><a href="images/fulls/06.jpg" class="image full"><img src="images/thumbs/06.jpg" alt="" title="Different." /></a></div>
<div class="3u"><a href="images/fulls/07.jpg" class="image full"><img src="images/thumbs/07.jpg" alt="" title="History was made here" /></a></div>
<div class="3u"><a href="images/fulls/08.jpg" class="image full"><img src="images/thumbs/08.jpg" alt="" title="People come and go and walk away" /></a></div>
</div>
</div>
</article>
<!-- Contact -->
<article class="container box style3">
<header>
<h2>Nisl sed ultricies</h2>
<p>Diam dignissim lectus eu ornare volutpat orci.</p>
</header>
<form>
<div class="row half">
<div class="6u"><input type="text" class="text" name="name" placeholder="Name" /></div>
<div class="6u"><input type="text" class="text" name="email" placeholder="Email" /></div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><a href="#" class="button form">Send Message</a></li>
</ul>
</div>
</div>
</form>
</article><section id="footer">
<ul class="icons">
<li><a href="#" class="fa fa-twitter solo"><span>Twitter</span></a></li>
<li><a href="#" class="fa fa-facebook solo"><span>Facebook</span></a></li>
<li><a href="#" class="fa fa-google-plus solo"><span>Google+</span></a></li>
<li><a href="#" class="fa fa-pinterest solo"><span>Pinterest</span></a></li>
<li><a href="#" class="fa fa-dribbble solo"><span>Dribbble</span></a></li>
<li><a href="#" class="fa fa-linkedin solo"><span>LinkedIn</span></a></li>
</ul>
<div class="copyright">
<ul class="menu">
<li>© Untitled. All rights reserved.</li>
<li>Design: <a href="http://html5up.net/">HTML5 UP</a></li>
</ul>
</div>
</section>
</body>
所以基本上通过点击proceed....按钮我要显示的横幅部分，与行为…按钮。当我按下动作按钮时，我想显示网站的所有其他部分。
我有它半固定现在，但第二次点击后，我不能再滚动了，请帮助，www.fenrak.com我上传了它，所以你可以看到
body元素使用overflow:hidden样式。当点击按钮时，用Javascript删除它。
[编辑]例子:
在样式部分:
body{
overflow:hidden;
}
javascript部分:
$(document).ready(function(){
$("#BUTTON_ID").click(function(){
$("body").css("overflow", "visible");
});
});
(未测试代码)
相关文章：
- 在我的网站上显示最近提交的文章/图片
- 如何更改网站上显示的文本
- Magento网站上线直播服务器只显示主页
- 使用API在我的网站Google-Map上显示搜索地址的纬度和经度
- 在网站上显示.mov作为加载屏幕的最佳方式
- 如何使用JS/jQuery在另一个网站上显示iframe中的特定内容
- 显示用于网站打印的PDF
- 检测重定向并相应地显示网站
- 在元素悬停上显示带有javascript的弹出式网站
- 如何在标题上创建弹出框，当点击关闭按钮时，不使用jquery或php在网站中显示
- 为自定义网站创建JavaScript搜索框，创建显示搜索结果的弹出窗口
- ASP MVC网站与vegas背景幻灯片不显示背景后发布到服务器
- 根据当前网站显示内容
- 留下我的网站显示弹出框与消息
- 我的网站显示空白页面
- 如何使网站显示总是在纵向方向
- 为什么我的网站显示延迟在Chrome浏览器当我滚动
- 如何阻止网站显示退出确认(该网站是在您的网站弹出窗口中打开的）
- 阻止网站显示基于特定日期的内容
- 如何在我的网站显示其他网站的一部分
