jquery-nav-scroll
Version:
A simple jQuery plugin for animated scrolling to a section of your page with mobile dropdown and scrollspy support.
79 lines (72 loc) • 2.38 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery navScroll | Demo</title>
<link rel="stylesheet" href="style.css">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>
<body>
<nav class="nav">
<div class="nav-mobile">
Click
</div>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3" data-scrolltime="1500">Section 3</a></li>
</ul>
</nav>
<div class="scroll-status"></div>
<section id="section1">
<h1>Section 1</h1>
<p>
Drag your screen so its width is below 768 pixels to test the mobile dropdown functionality. <br>
You can set the breakpoint with an option. Read more about it in the README.
</p>
</section>
<section id="section2">
<h1>Section 2</h1>
<p>
You can call the plugin on any element you like as long as it contains an anchor tag with an href attribute.<br>
See the example button below:
</p>
<div class="click-me"><a href="#section1">Click me!</a></div>
<p>
Since a button like this doesn't require an offset (it's not fixed like the navigation bar) I set the navHeight option to '0'.
</p>
</section>
<section id="section3">
<h1>Section 3</h1>
As you may have noticed after clicking the 'Section 3' URL, the duration of the scrolling animation was way longer.<br>
You can set a specific scrollTime inside the data-scrolltime attribute (check the source).
</section>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../jquery.navScroll.js"></script>
<script>
var $scrollStatus = $('.scroll-status');
$('.nav').navScroll({
mobileDropdown: true,
mobileBreakpoint: 768,
scrollSpy: true,
onScrollStart: function() {
$scrollStatus.show();
$scrollStatus.text('Started scrolling');
},
onScrollEnd: function() {
$scrollStatus.text('Scrolling ended');
setTimeout(function() {
$scrollStatus.fadeOut(200);
}, 1000);
}
});
$('.click-me').navScroll({
navHeight: 0
});
$('.nav').on('click', '.nav-mobile', function (e) {
e.preventDefault();
$('.nav ul').slideToggle('fast');
});
</script>
</body>
</html>