Method: Dynamic Scroll Icon

Posted by on Dec 23, 2013 in Code Snippets, Method, Web Development | 2 Comments

Tim Mein Architects

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.

Tim Mein Architects

Tim Mein Architects

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.

Tim Mein ArchitectsWhen 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"});
 }};
})();

2 Comments

  1. konrad bialy
    January 28, 2014

    good post bro, bookmarked !

    love the design of your site by the way

    Reply

Leave a Reply