title: Appending div causes element to scroll to bottom
body: <p>So I'm trying to append an ad box to the bottom of a div in my application, but most times when the ad loads it causes the div to scroll to the bottom. </p>
  
  <p>Chitika, the ad service I'm using, provides HTML snipits for me to use. So I just added the snipit to my backbone template, and whenever I show a view the script gets run and an ad loads. </p>
  
  <p>For example, this is at the bottom of my template:</p>
  
  <pre><code>&lt;div class="ad-box"&gt;
      // Script they gave me. 
      // I edited it to append to the .ad-box div instead of the body
      &lt;script type="text/javascript"&gt;
          ( function() {
               ...
               $('.ad-box').append('&lt;div id="chitikaAdBlock-' + placement_id + '"&gt;&lt;/div&gt;');
               ...
               }());
      &lt;/script&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>It takes a second for the ad to load after the view is shown, but when it is, most times it causes the page to jump down to the bottom. Does anyone have any idea why?</p>
  
  <p>If it helps here are my styles for the items:</p>
  
  <pre><code>    .ad-box {
          text-align: center;
          width: 640px;
          height: 90px;
          padding-bottom: 30px;
          margin-bottom: 60px;
      }
  
      .chitikaAdBlock {
          margin-left:auto;
          margin-right:auto;
      }
      .chitikaAdContainer {
          height: 90px;
      }
  </code></pre>
  
  <p>What an add looks like after appended: </p>
  
  <pre><code>&lt;div id="chitikaAdBlock-3" class="chitikaAdContainer"&gt;
     &lt;iframe class="chitikaAdBlock" frameborder="0" height="60" id="ch_ad3-0" marginheight="0" marginwidth="0" scrolling="no" src="about:blank" width="468" style="margin: 0px; padding: 0px;"&gt;
     &lt;/iframe&gt;
   &lt;/div&gt;
  </code></pre>