├── .gitignore ├── README.md ├── bower.json ├── jquery.section-scroll.js ├── package.json └── section-scroll.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .AppleDouble 3 | .LSOverride 4 | node_modules/ 5 | npm-debug.log -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Complete guide and Demo here 2 | 3 |

Section Scroll V2

4 |

Thanks to Sylvain Baronnet for contributing on major refactoring and performance improvements of this plugin.

5 | 6 | sections scrolling 7 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section-scroll", 3 | "version": "2.0.0", 4 | "homepage": "https://github.com/m-danish-iqbal/section-scroll", 5 | "authors": [ 6 | "Danish Iqbal", 7 | "Sylvain Baronnet" 8 | ], 9 | "description": "jQuery plugin for automatically making scrollable sections navigation", 10 | "main": [ 11 | "./jquery.section-scroll.js", 12 | "./section-scroll.css" 13 | ], 14 | "dependencies": { 15 | "jquery": ">=1.7" 16 | }, 17 | "keywords": [ 18 | "jQuery", 19 | "scroll" 20 | ], 21 | "license": "MIT", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests" 28 | ], 29 | "homepage": "http://plugins.imdanishiqbal.com/section-scroll/" 30 | } 31 | -------------------------------------------------------------------------------- /jquery.section-scroll.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Section Scroll v2 3 | * Contributor: https://github.com/sylvainbaronnet 4 | * 5 | * Copyright (c) 2016 Danish Iqbal 6 | * http://plugins.imdanishiqbal.com/section-scroll 7 | * 8 | * Licensed under MIT 9 | * 10 | */ 11 | (function ($) { 12 | 'use strict'; 13 | 14 | $.fn.sectionScroll = function (options) { 15 | var $container = this, 16 | $window = $(window), 17 | $section_number = 1, 18 | lastId, 19 | settings = $.extend({ 20 | bulletsClass: 'section-bullets', 21 | sectionsClass: 'scrollable-section', 22 | scrollDuration: 1000, 23 | titles: true, 24 | topOffset: 0, 25 | easing: '' 26 | }, options); 27 | 28 | var $sections = $('.' + settings.sectionsClass); 29 | var $bullets = $('
') 30 | .prependTo($container) 31 | .find('ul'); 32 | 33 | /* Build navigation */ 34 | var bullets_html = ''; 35 | $sections.each(function () { 36 | 37 | var $this = $(this); 38 | var title = $this.data('section-title') || ''; 39 | 40 | $this.attr('id', 'scrollto-section-' + $section_number); 41 | 42 | var bullet_title = settings.titles ? '' + title + '' : ''; 43 | 44 | bullets_html += '
  • ' + bullet_title + '
    • '; 45 | 46 | $section_number++; 47 | }); 48 | 49 | var $bullets_items = $(bullets_html).appendTo($bullets); 50 | 51 | var scrollItems = $bullets_items.map(function () { 52 | var item = $($(this).find('a').attr('href')); 53 | if (item[0]) { 54 | return item; 55 | } 56 | }); 57 | 58 | $bullets_items.on('click', function (e) { 59 | 60 | var href = $(this).find('a').attr('href'), 61 | offsetTop = href === '#' ? 0 : $(href).offset().top; 62 | 63 | $('html, body').stop().animate({ 64 | 65 | scrollTop: offsetTop - settings.topOffset 66 | }, settings.scrollDuration, settings.easing, function(){ 67 | $container.trigger('scrolled-to-section').stop(); 68 | }); 69 | e.preventDefault(); 70 | }); 71 | 72 | $window.on('scroll', function () { 73 | var fromTop = $window.scrollTop() + ($window.height() / 2.5); 74 | 75 | var cur = scrollItems.map(function () { 76 | 77 | if ($(this).offset().top < fromTop) { 78 | return this; 79 | } 80 | }); 81 | cur = cur.length > 0 ? cur[cur.length - 1] : []; 82 | var id = cur[0] ? cur[0].id : ''; 83 | 84 | if (lastId !== id) { 85 | $sections.removeClass('active-section'); 86 | 87 | $(cur).addClass('active-section'); 88 | $bullets_items 89 | .removeClass('active') 90 | .find('a[href="#' + id + '"]') 91 | .parent() 92 | .addClass('active'); 93 | 94 | lastId = id; 95 | $.fn.sectionScroll.activeSection = cur; 96 | $container.trigger('section-reached'); 97 | } 98 | }); 99 | 100 | $(function() { 101 | $window.scroll(); 102 | }); 103 | 104 | return $container; 105 | }; 106 | }(jQuery)); 107 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "section-scroll", 3 | "version": "2.0.0", 4 | "description": "jQuery plugin for automatically making scrollable sections navigation", 5 | "main": "jquery.section-scroll.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/m-danish-iqbal/section-scroll.git" 12 | }, 13 | "keywords": [ 14 | "jQuery", 15 | "scroll" 16 | ], 17 | "author": "Danish Iqbal", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/m-danish-iqbal/section-scroll/issues" 21 | }, 22 | "homepage": "https://github.com/m-danish-iqbal/section-scroll#readme", 23 | "dependencies": { 24 | "jquery": ">=3.4.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /section-scroll.css: -------------------------------------------------------------------------------- 1 | .bullets-container { 2 | display: table; 3 | position: fixed; 4 | right: 0; 5 | height: 100%; 6 | z-index: 1049; 7 | font-weight: normal; 8 | } 9 | 10 | .section-bullets { 11 | transition-duration: .3s; 12 | list-style: none; 13 | margin: 0; 14 | display: table-cell; 15 | vertical-align: middle; 16 | } 17 | 18 | .section-bullets li { 19 | display: block; 20 | text-align: right; 21 | font-size: 13px; 22 | text-transform: uppercase; 23 | line-height: 1; 24 | position: relative; 25 | border-top-left-radius: 30px; 26 | border-bottom-left-radius: 30px; 27 | cursor: pointer; 28 | margin-bottom: 1px; 29 | } 30 | 31 | .section-bullets li a:before { 32 | content: ' '; 33 | width: 0; 34 | height: 100%; 35 | background-color: #eee; 36 | position: absolute; 37 | right: 0; 38 | top: 0; 39 | border-top-left-radius: 30px; 40 | border-bottom-left-radius: 30px; 41 | transition-duration: .1s; 42 | } 43 | 44 | .section-bullets li a:after { 45 | content: ' '; 46 | width: 6px; 47 | height: 6px; 48 | border-radius: 50%; 49 | background-color: #000; 50 | position: absolute; 51 | right: 8px; 52 | top: 8px; 53 | transition-duration: .2s; 54 | } 55 | 56 | .section-bullets li a { 57 | color: #000; 58 | overflow: hidden; 59 | position: relative; 60 | display: inline-block; 61 | transition-duration: .3s; 62 | opacity: 0.5; 63 | margin-left: 5px; 64 | padding: 5px 20px 5px 10px; 65 | text-decoration: none; 66 | min-height: 11px; 67 | } 68 | 69 | .section-bullets li span { 70 | position: relative; 71 | right: 0; 72 | transition-duration: 0.3s; 73 | opacity: 0; 74 | } 75 | 76 | .section-bullets li.active a { 77 | opacity: 1; 78 | } 79 | 80 | .section-bullets li.active a:before { 81 | width: 100%; 82 | transition-duration: .3s; 83 | transition-delay: 0.4s; 84 | } 85 | 86 | .section-bullets li:hover a { 87 | opacity: 1; 88 | } 89 | 90 | .section-bullets li:hover span { 91 | opacity: 1; 92 | transition-delay: 0.1s; 93 | } 94 | 95 | .section-bullets li.active span { 96 | opacity: 1; 97 | transition-duration: .3s; 98 | transition-delay: 0.5s; 99 | } 100 | --------------------------------------------------------------------------------