title: Unrecognized expression: a[href^=#]
body: <p>I am trying to make a trivial "scrollTo element" function.</p>
  
  <p>Console shows me the error:
  <strong>Syntax error, unrecognized expression: a[href^=#]</strong> for <strong>a[href^=#]</strong> code</p>
  
  <p>According to the reply on <a href="https://stackoverflow.com/questions/31197452/syntax-error-unrecognized-expression-for-href">this question</a> I wrapped the hash symbol into double quotes, but now console shows <strong>Unexpected token ILLEGAL</strong> for that.</p>
  
  <p>Please, explain what I am doing wrong and how to fix it.</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click', 'a[href^=#]', function () {
          $('html, body').animate({ scrollTop:  $('section[data-target="'+this.hash.slice(1)+'"]').offset().top }, 1000 ); 
          return false;
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>menu {
    background-color: #1abc9c;
    height: 50px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  
  menu ul li {
    display: inline-block;
    padding: 0 15px;
  }
  
  menu ul li a {
    color: #333;
    text-decoration: none;
  }
  
  
  section {
    height: 300px;
    padding: 60px 0 0 45px;
  }
  
  .one {
    background-color: #3498db;
  }
  
  .two {
    background-color: #e74c3c;
  }
  
  .three {
    background-color: #f39c12;
  }
  
  .four {
    background-color: #2c3e50;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;menu&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#one"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#two"&gt;Two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#three"&gt;Three&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#four"&gt;Four&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/menu&gt;
  
  &lt;section class="one" data-target="one"&gt;Section One&lt;/section&gt;
  &lt;section class="two" data-target="two"&gt;Section Two&lt;/section&gt;
  &lt;section class="three" data-target="three"&gt;Section Three&lt;/section&gt;
  &lt;section class="four" data-target="four"&gt;Section Four&lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/5badmm2u/" rel="noreferrer">and the same in JSFiddle</a></p>