任意の要素のスムーススクロールのみ無効にする

ページ内リンクはデフォルトでスムーススクロールするけど、特定の場所だけはさせたくない（タブ etc）場合の対処法。

coffee

  $('a[href^=#]'+'a[href!=#]').on('click.smoothScroll'
    (e)->
      $(
        if (navigator.userAgent.indexOf('Opera') isnt -1)
        then (
          if document.compatMode is 'BackCompat'
          then 'body'
          else 'html'
        )
        else 'html,body'
      ).animate(
        scrollTop:$($(this).attr('href')).offset().top - 20
      ,
        easing:'easeInOutCirc',
        duration:1000
      )

      e.preventDefault()
      return
  )

  ...

  $('.tab-item').find('a').on('mouseenter',
    (e)->
      $(this).off('click.smoothScroll')
  )

  $('.tab-item').find('a').on('click',
    (e)->
      e.preventDefault()
  )

jade

doctype html
html(lang="ja")
  head
  body
    #container

      ...

      ul
          li.tab-item
            a(href="#a") a
          li.tab-item
            a(href="#b") b
      #a
      #b

      ...

      a(href='#container') トップへ戻る

on('mouseenter') でカーソルが a タグに入ったと同時に click.smoothScoll を off する。

on('click.smoothScroll') off('click.smoothScroll') のように click.hoge という名前空間を付けることで、スムーススクロールだけを切ることが出来る。