jQuery Automatic Vertical Full-Page Scrolling Navigation Plugin section-scroll.js

Add-ons

2026-07-25 23:04 4 次浏览 • 0 次下载 88.4KB

Plugin description: section-scroll.js is a jQuery plugin that automatically generates vertical full-page scrolling navigation. Clicking the dot navigation buttons smoothly scrolls between sections. The plugin is easy to use and highly practical.

section-scroll.js

A jQuery plugin for automatically generating navigation for scrollable sections.

Usage

Download the compressed package and include jquery, jquery.section-scroll.js, and section-scroll.css in your page. If you need animated transitions with easing effects, you can also include jquery.easing.1.3.js.

<link href="css/section-scroll.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script> 
<script src="js/jquery.section-scroll.js"></script>

HTML Structure

This plugin treats each <section> element as a separate section, with each scrolling navigation button corresponding to one section.

<div class="scrollable-section" data-section-title="Section-1"></div> 
<div class="scrollable-section" data-section-title="Section-2"></div> 
<div class="scrollable-section" data-section-title="Section-3"></div>

Here, scrollable-section is the <section> you want to include in the scrolling navigation. The plugin uses the data-section-title attribute as the title of the navigation menu item.

Initialize the Plugin

After the page DOM elements have finished loading, initialize the section-scroll.js plugin using the following method.

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

Configuration Parameters

The default configuration parameters of the section-scroll.js plugin are:

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

Parameters	Type	Description
bulletsClass	string	Set the class for the dot navigation menu.
sectionsClass	string	By default, the plugin looks for elements with the class`scrollable-section`'s`<section>`as scrollable sections. You can change this class using this parameter.
scrollDuration	int	Duration of the transition when scrolling from one section to another.
titles	boolean	Set to false to hide titles in the navigation.
topOffset	int	For example, setting this value to 100 means that when scrolling to a section, the section will be positioned 100 pixels from the top of the page.
easing	string	By default, this plugin does not provide easing effects. You can includehttp://gsgd.co.uk/sandbox/jquery/easing/after the plugin and use this parameter to configure easing effects. Available easing values can be found inhttp://easings.net/

Events

section-reached: This event is triggered whenever a section scrolls into the viewport.

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

Tips

You can also access the active section through the activeSection variable. For example:

$('body').on('section-reached', function(){
    var section_title = $('body').sectionScroll.activeSection.data('section-title');
    alert(section_title);
})

See the following example:

<section class="scrollable-section" data-short-description="We love coding"></section>

Now we can retrieve the section title and display it in a div.

$('body').on('section-reached', function(){
    var short_description = $('.body').sectionScroll.activeSection.data('short-description');
    $('div').html(short_description);
    // We can also change the background color of the active section.
    $('body').sectionScroll.activeSection.css('background-color', '#000'); 
})