Recently doing some proof of concept on using jQuery SnapScroll. The demo worked without any problem but when i implemented it, i couldn’t make my div taking 100% height of the view port. Finally i figured out that the failure was caused by the HTML5 Doctype declaration on the index.html.
<!DOCTYPE html> <html> ... </html>
The demo worked because it doesn’t have any Doctype declaration. Here is a working example to make jQuery SnapScroll work with HTML5 Doctype.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scrolling Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.snapscroll/0.1/dependencies/jquery.scroll_to.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.snapscroll/0.1/jquery.snapscroll.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"></script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id="container">
<div id="page1" class="page">
<h1><a name="about">about</a></h1>
About page content goes here.
</div>
<div id="page2" class="page">
<h1><a name="portfolio">portfolio</a></h1>
Portfolio page content goes here.
</div>
<div id="page3" class="page">
<h1><a name="contact">contact</a></h1>
Contact page content goes here.
</div>
</div>
</body>
</html>
style.css
html, body, #container {
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
}
.page {
min-height: 100%;
width: 100%;
}
h1 { margin: 0px; }
#page1 { background-color: red; }
#page2 { background-color: green; }
#page3 { background-color: blue; }
script.js
$(function() {
$("#container").snapscroll();
});
Done =)
Reference:
- jQuery.SnapScroll
- jQuery.ScrollTo
- StackOverflow – Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
Eureka! 