Unrecognized expression: a[href^=#]
<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>