page scrolls when hiding/showing content from select option change using jQuery
<p>I have written a piece of jQuery that hides/shows a specified element when a drop down option/s is selected.</p>

<p>The problem I am having is that when one of the options is selected the page scrolls so that the bottom of the browser aligns with the top of the content that has just been hidden/shown. How do I stop this happening?</p>

<p>Below is a summarised version of the code.</p>

<pre><code>$(function() {
    $('#billing_address2').change(function() {
        $('.calendar').hide();
        if ($(this).val() == "None") {
            $('.empty').show();
        }
        if ($(this).val() == "Arch Hill" || $(this).val() == "Balmoral" || $(this).val() == "Central Business District" || $(this).val() == "Eden Terrace" || $(this).val() == "Ellerslie" || $(this).val() == "Epsom") {
            $('.central').show();
        }
        if ($(this).val() == "Albany" || $(this).val() == "Bayswater" || $(this).val() == "Bayview" || $(this).val() == "Belmont") {
            $('.north').show();
        }
        if ($(this).val() == "Glendowie" || $(this).val() == "Kohimarama" || $(this).val() == "Meadowbank" || $(this).val() == "Mission Bay") {
            $('.east').show();
        }
        if ($(this).val() == "Avondale" || $(this).val() == "Blockhouse Bay" || $(this).val() == "Glen Eden" || $(this).val() == "Glendene") {
            $('.west').show();
        }
    ;});
});

&lt;select id="billing_address2"&gt;
    &lt;option selected value="None"&gt;Suburb...&lt;/option&gt;
    &lt;option value="Albany"&gt;Albany&lt;/option&gt;
    &lt;option value="Arch Hill"&gt;Arch Hill&lt;/option&gt;
    &lt;option value="Avondale"&gt;Avondale&lt;/option&gt;
    &lt;option value="Balmoral"&gt;Balmoral&lt;/option&gt;
    &lt;option value="Bayswater"&gt;Bayswater&lt;/option&gt;
    &lt;option value="Bayview"&gt;Bayview&lt;/option&gt;
    &lt;option value="Belmont"&gt;Belmont&lt;/option&gt;
    &lt;option value="Blockhouse Bay"&gt;Blockhouse Bay&lt;/option&gt;
    &lt;option value="Central Business District"&gt;Central Business District&lt;/option&gt;
    &lt;option value="Eden Terrace"&gt;Eden Terrace&lt;/option&gt;
    &lt;option value="Ellerslie"&gt;Ellerslie&lt;/option&gt;
    &lt;option value="Epsom"&gt;Epsom&lt;/option&gt;
    &lt;option value="Glen Eden"&gt;Glen Eden&lt;/option&gt;
    &lt;option value="Glendene"&gt;Glendene&lt;/option&gt;
    &lt;option value="Glendowie"&gt;Glendowie&lt;/option&gt;
    &lt;option value="Kohimarama"&gt;Kohimarama&lt;/option&gt;
    &lt;option value="Meadowbank"&gt;Meadowbank&lt;/option&gt;
    &lt;option value="Mission Bay"&gt;Mission Bay&lt;/option&gt;
&lt;/select&gt;
</code></pre>
