"Timeline Scroll Section by Section"
Bootstrap 3.3.0 Snippet by iammahesh

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<article class="container">
<header class="jumbotron text-center">
<h2>Timeline Scroll Section by Section</h2>
<p class="text-warning">Move your mouse to the right edge of the viewport</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia doloremque minima ab? Id provident aperiam atque excepturi repudiandae quis eveniet expedita dolores esse doloremque quasi sed magnam commodi sit modi!</p>
<p>Molestiae incidunt asperiores rerum consequatur laboriosam eius minima suscipit ipsam vel magni! Ratione nisi neque cum eaque accusantium voluptatem distinctio quidem minus excepturi illo ipsam hic laudantium quas. Id laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos ad assumenda molestias tempora at natus sint fugiat cum ullam esse magni quidem facilis quis dolore tenetur inventore provident maxime consequuntur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque architecto officia praesentium cupiditate eos laboriosam dolorum placeat amet corporis eveniet. Itaque nesciunt perspiciatis quasi architecto ipsam molestias dignissimos quo consequuntur!</p>
<p>Exercitationem sunt deleniti atque quaerat repudiandae quisquam recusandae dicta ea et cumque praesentium animi magni quia labore rerum esse illum ad! Nihil quidem eaque nesciunt laborum repellendus ipsa sit ipsum.</p>
<p>Eum quis iure nulla exercitationem repellendus ducimus provident recusandae facilis doloremque numquam odit in veritatis libero placeat minus praesentium animi voluptate eaque tenetur delectus sequi. Quas debitis eos dignissimos reiciendis?</p>
<p>Sapiente vitae ipsam quibusdam ullam modi excepturi impedit tempore laborum atque hic magnam consequatur aspernatur adipisci! Eveniet nemo dicta sint sunt accusantium dolore sed commodi dolor ipsa perspiciatis culpa repellendus.</p>
<p>Eligendi illo quod non vitae quas delectus quis. Aliquam magnam hic nisi natus unde facere cum eos cupiditate est blanditiis dolorem dolorum quisquam accusamus quas veniam adipisci deserunt tempora inventore.</p>
<p>Illum quas omnis quidem ducimus id nulla veritatis placeat consectetur dolorem molestiae modi est numquam sed sint quaerat illo voluptas totam hic velit nesciunt nobis libero amet adipisci consequatur tenetur.</p>
<p>Ea laudantium laborum commodi doloremque at omnis sunt accusantium expedita aliquam quisquam dolorum fugit consequuntur consectetur vel neque sed provident distinctio incidunt voluptates libero aut quam ratione cum tenetur earum.</p>
<p>Similique architecto placeat recusandae quam ad tempore perferendis odio possimus assumenda soluta ipsum quasi et nisi fugiat vel iure illum sequi optio harum dolor. Sit dolore molestiae saepe placeat voluptates.</p>
<h2>Something</h2>
<h2>Something else</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique asperiores ab perspiciatis aliquid maiores iusto corporis perferendis ea nihil vel veritatis accusamus atque incidunt nemo natus eveniet consequuntur placeat quidem!</p>
<p>Impedit est commodi alias accusamus sit ut ad explicabo ipsum non eveniet? Necessitatibus deleniti eos modi omnis deserunt porro optio fugiat aliquid quisquam reprehenderit accusantium suscipit id labore odio praesentium.</p>
<p>Dolore autem harum ipsum aspernatur earum iusto hic ut veritatis officia nam veniam corrupti eius. Quas qui expedita tempora doloribus in distinctio asperiores maxime ipsam veritatis amet libero aliquam voluptatibus.</p>
<p>Provident totam beatae sequi minus voluptas voluptates fugiat libero perferendis officiis tempore eum amet hic dolore dolorum quos nemo architecto veniam in iure nostrum sint aliquam magni necessitatibus rerum maiores.</p>
<p>Provident dolor suscipit atque dicta ex maiores adipisci deserunt quaerat reiciendis eaque qui similique doloremque amet iste iure inventore aspernatur vero delectus laboriosam deleniti voluptatum. Molestias voluptas nemo cum in!</p>
<p>Quo nulla id dolor et facere mollitia alias modi officiis doloremque eligendi doloribus fugiat ratione cupiditate amet excepturi laboriosam natus. Dolores possimus magni officiis veniam expedita libero iure maiores voluptatibus.</p>
<p>Cumque consequatur rem alias neque sunt minus nostrum! Saepe illum magnam earum quis molestias nobis repellat debitis illo sit iusto repellendus nesciunt necessitatibus nam inventore ex doloremque nemo nisi suscipit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iure a illum doloremque quibusdam omnis veritatis facere harum dolores voluptate quos laborum consectetur saepe earum doloribus eaque voluptas dolore quas.</p>
<p>Atque harum earum tempora natus repudiandae minus quidem velit consectetur perferendis consequatur necessitatibus facilis rerum excepturi ipsam dolores laborum accusantium maxime iure debitis nesciunt ratione vel veniam. Ipsa vitae quasi!</p>
<p>Unde minima suscipit esse molestias totam blanditiis dolor ut ipsa officia ducimus accusantium expedita quaerat alias dolores magni velit porro atque consequatur! Fugit a nesciunt cupiditate temporibus placeat minus debitis?</p>
<p>Vitae aliquid soluta blanditiis quam qui accusamus rem aut magnam laudantium molestiae incidunt dolorem recusandae voluptatem illo veniam facere similique corrupti hic harum iure! Perferendis dolorem repudiandae nam distinctio nisi.</p>
<p>Libero rem ad saepe tenetur doloremque et amet quasi rerum officia! Numquam voluptas eligendi pariatur sed quaerat cupiditate fugit dignissimos at velit beatae nulla corrupti libero voluptatem dicta ut quos?</p>
<p>Voluptatem voluptatibus debitis quia! Odit aliquam natus laborum et mollitia nulla est quaerat beatae pariatur dicta hic officia numquam facere neque officiis asperiores aperiam praesentium ipsum molestias velit deleniti doloribus.</p>
<p>Aliquam maxime atque magni perferendis rem voluptas repellendus! Hic rerum officiis sint et minima nisi modi perspiciatis quidem commodi aperiam molestiae eum atque eaque natus expedita consequatur aliquid rem totam.</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.timelineScroll {
position: fixed;
top: 0px;
right: 0;
bottom: 0px;
opacity: 0;
width: 170px;
margin: 17px 0;
overflow: hidden;
transition: .5s opacity linear;
&.active {
opacity: 1;
}
li {
width: 100%;
display: block;
position: absolute;
text-align: right;
padding-right: 11px;
a {
padding: 1px 4px;
background-color: rgba(255, 255, 255, .8);
}
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// https://github.com/krnlde/jquery.timeline-scroll
!(function ($, window, undefined) {
var $window = $(window);
var $body = $(document.body);
var windowHeight = $window.height();
var bodyHeight = $body.height();
var defaults = {
scrollSpeed : 'fast'
};
$.fn.timelineScroll = function (opts) {
var that = this;
var options = $.extend(defaults, opts);
var $container, lastPosition = 0;
function calculateTop($elem) {
return $elem.offset().top;
}
function calculatePosition($elem) {
return calculateTop($elem) / bodyHeight * $container.height();
}
if (this.length) {
if (!$body.data('timelineScroll')) {
$container = $('<ul role="menubar" class="list-unstyled timelineScroll"/>').appendTo($body);
that.each(function () {
var $this = $(this);
var height = $this.height();
var top = calculateTop($this);
var position = calculatePosition($this);
if (!$this.attr('id')) {
$this.attr('id', $this.get(0).tagName + '_' + Math.floor(top * 100));
}
$a = $('<a href="#' + $this.attr('id') + '">' + $this.text() + '</a>').click(function () {
$('html, body').animate({scrollTop: top}, options.scrollSpeed);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO Angular
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Simple Vertical timeline

Questions / Comments: