Method: Dynamic Scroll Icon

This neat little navigation tool caught my eye when I visited terminalplanning.aero For basic versions, we’ve seen these back-to-top widgets as we scroll down the page and when we click on them they take us straight back to the top. This script however has a very different behavior.

As soon as you start scrolling, a black spot appears that immediately draws your attention to navigate to it, once you hover over the image, the shape transforms into a bigger spot with an arrow icon within in. You can click it to slowly move down the page to each section.

When you get down to the last section of the page, they the behavior of the navigation changes, transforming the down arrow to an upward facing arrow and when you click on it again, you smoothly scroll straight back up to the top.

Here’s the snippet

/*
JS - Dynamic Scroll icon
Reference Site: http://terminalplanning.aero/
*/
(function() {
 function NavElement() {
 this.el = $("<nav class='black-spot'><span>&darr;</span></div>'");
 this.sectionSelectors = ["#top", "#airports", "#services", "#contact", "#latest"];
 $(window).on("load", $.proxy(this, "init"));
 }
 NavElement.prototype = {init: function() {
 $("body").append(this.el);
 this.el.on("click", $.proxy(this, "handleNext"));
 $(window).on("scroll", $.proxy(this, "updatePosition"));
 this.airportsEl = $("#airports");
 this.introEl = $(".intro");
 this.updatePosition();
 $(window).on("load", $.proxy(this, "updatePosition"));
 },updatePosition: function(e) {
 var dest = null, last = false, curr;
 var c = $(window).scrollTop();
 for (var i = 0; i < this.sectionSelectors.length; i++) {
 curr = $(this.sectionSelectors[i]);
 if (curr.offset().top > (c + 1)) {
 dest = curr;
 break;
 }
 }
 if (!dest) {
 dest = $(this.sectionSelectors[0]);
 last = true;
 }
 this.next = dest;
 this.isLast = last;
 if (this.isLast) {
 this.el.addClass("last");
 } else {
 this.el.removeClass("last");
 }
 this.updateOpacity(c);
 },updateOpacity: function(scrollTop) {
 var airportCenter = this.airportsEl.offset().top + (this.airportsEl.height() / 2);
 var introTop = this.introEl.offset().top;
 var windowCenter = scrollTop + ($(window).height() / 2);
 var positionInRange = Math.max(0, Math.min(1, (windowCenter - introTop) / (airportCenter - introTop)));
 this.el.css({opacity: positionInRange});
 },handleNext: function(e) {
 e.preventDefault();
 var duration = 400;
 if (this.isLast) {
 duration = 1200;
 }
 $("html,body").animate({scrollTop: this.next.offset().top}, duration, 'swing');
 },setUp: function() {
 this.el.css({backgroundColor: "blue"});
 },setDown: function() {
 this.el.css({backgroundColor: "transparent"});
 }};
})();