title: Change scrolling speed of a div
body: <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="intro-image"&gt;
      &lt;div id="intro-text"&gt;
          &lt;p class="intro-head"&gt;COLIN STEWART&lt;/p&gt;
          &lt;p class="intro-body"&gt;logos - branding - web&lt;/p&gt;
          &lt;a href="#work-anchor" class="smoothScroll"&gt;&lt;div id="portfolio-button"&gt;PORTFOLIO&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;a href="#about-anchor" class="smoothScroll"&gt;&lt;img src="images/arrow.png" id="arrow" class="animated bounce"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#intro-image {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(../images/desk.jpg);
      background-size: cover;
      background-attachment: fixed;
      background-repeat: repeat;
  }
  
  #intro-text {
      width: 1200px;
      max-width: 85%;
      margin: 0 auto;
      position: relative;
      top: 55%;
      transform: translateY(-50%);
  }
  
  .intro-head {
      font-family: 'Montserrat', sans-serif;
      font-size: 65px;
      color: #fff;
      font-weight: 700;
      text-align: center;
      margin: 0;
      letter-spacing: 3px;
  }
  
  .intro-body {
      font-family: 'Open Sans', sans-serif;
      font-size: 24px;
      color: #fff;
      font-weight: 300;
      text-align: center;
      margin: 0;
      letter-spacing: 0.5;
  }
  
  #portfolio-button {
      margin: 50px auto 0 auto;
      padding-top: 18px;
      width: 185px;
      height: 38px;
      background-color: #ef3c5f;
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      color: #fff;
      font-weight: 400;
      text-align: center;
      letter-spacing: 2px;
      transition: 0.6s;
      transform-style: preserve-3d;
  }
  
  #portfolio-button:hover {
      /*box-sizing: border-box;
      border-bottom: 5px solid #c42c50;*/
      transform: rotateX(360deg);
      cursor: pointer;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>/* Smooth Scroll */
  
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });
  
  /* Background Image Scroll Speed */
  
  $(document).ready(function(){
      var $win = $(window);
  
      $('#intro-image').each(function(){
          var scroll_speed = 2;
          var $this = $(this);
          $(window).scroll(function() {
              var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
              var bgPosition = 'center '+ bgScroll + 'px';
              $this.css({ backgroundPosition: bgPosition });
          });
      });
  });
  </code></pre>
  
  <p>Now I simply want the text (#intro-text div) to scroll slower. How can I achieve this (as simply as possible)?</p>
  
  <p>For the record, I know almost no javascript/jQuery yet, I achieve what I have so far through kind peoples help.</p>
  
  <p>Thanks in advance.</p>