CSS Selector for anchor with href not ending in '#'
<p>I want to display a loading icon on page loading.</p>

<p>I am using HTML, CSS and JS code.</p>

<p>HTML:</p>

<pre><code>&lt;div class="loader-icon"&gt;&lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>$(window).load(function() {
    $(".loader-icon").fadeOut("slow");
});

$('a').click(function(){
    $(".loader-icon").fadeIn("slow");
})
</code></pre>

<p>and some CSS to display a loading icon for <code>div.loader-icon</code>.</p>

<p>It is working fine if I click on any link which redirects to another page. But it does not work when the link does not redirect to another page. Like when I click on the "Back to Top" icon, the loading icon keeps displaying. It does not fade out.</p>

<p>Suppose:</p>

<pre><code>&lt;a href="http://example.com/page/"&gt;Page Now&lt;/a&gt;
&lt;a href="http://example.com/page/#"&gt;Back to Top&lt;/a&gt;
&lt;a href="http://example.com/page2/"&gt;Page Other&lt;/a&gt;
</code></pre>

<p>It will work for 'Page Other' but not for 'Back to Top'.</p>

<p>So I want to choose a selector for anchors whose hrefs do not end in '#'. Or is there a better way to do the same thing using a different easy trick?</p>