JSFiddle - React, Tailwind, and code Playground

by karlhorky

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

CoffeeScript

class AnchorNav
  constructor: ($location) ->
    console.log $location

    link = (scope, element, attrs) ->
      element.find('a[data-toggle="tab"]').each () ->
        $this     = $(this)
        $toScroll = $('html, body')

        $this.on 'click', () ->
          $location.path($this.attr('href'))

        if $this.attr('href').substring(1) is $location.path().substring(1)
          $toScroll.animate
            scrollTop: $this.offset().top - 95

        console.log($this.attr('href'))
        console.log $location.path()

    return {
      link
      scope:
        myId: '@'
      restrict: 'A'
    }


angular.module('app').directive 'anchorNav', ['$location', AnchorNav]