【jQuery】セクションナビゲーションプラグイン。Section Scroll

Section Scrollは1ページスクロールナビゲーションを生成するための軽量なjQueryのプラグイン。
セクションをスムーズにスクロールするナビゲーションをクリックして、自動的に正しいナビゲーションが選択されます。

CSS・jQuery

<!-- -----Styles----- -->
<link rel="stylesheet" type="text/css" href="css/section-scroll.css">
<!-- -----Scripts----- -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js">
<!-- This is optional, if you want to use easings then please include jquery.easing.1.3.js. See options -->
<!-- Get it here (Please buy him a beer) http://gsgd.co.uk/sandbox/jquery/easing/-->
<script type="text/javascript" src="js/jquery.easing.1.3.js">   
<!-- Last but not least  -->           
<script type="text/javascript" src="js/jquery.section-scroll.js">

HTML

<div class="scrollable-section" data-section-title="About Us"></div> 
<div class="scrollable-section" data-section-title="Example"></div> 
<div class="scrollable-section" data-section-title="Testimonials"></div>

Call Him

<script type="text/javascript"> 
$(document).ready(function () { 
$('body').sectionScroll(); // Easy Peasy Lemon Squeezy 
}) 
</script>

デフォルト

bulletsClass: 'section-bullets',
sectionsClass: 'scrollable-section',
scrollDuration: 1000,
titles: true,
topOffset: 0,
easing: ''

オプション

bulletsClass bulletsClass: ‘my-class’
sectionsClass sectionsClass: ‘my-sections’
scrollDuration scrollDuration: 3000
titles titles: false
topOffset topOffset: 100
easing easing: ‘easeInOutQuart’

Events

$('body').on('section-reached', function(){ 
console.log('section-reached'); 
})
 
section_scroll

【jQuery】セクションナビゲーションプラグイン。Section Scroll

  • LATEST
  • RELATED
  • POPULAR