title: Building css properties via javascript events
body: <p>I'm trying to display an arrow which guides the user to the top of the page on click:</p>
  
  <p>html code</p>
  
  <pre><code>&lt;a id="top" href="#"&gt;&lt;img src="/img/arrow.png"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>css code</p>
  
  <pre><code>.scroll #top{
    opacity: .2;
  }
  </code></pre>
  
  <p>js code</p>
  
  <pre><code>o = $;
  
  // misc junk
  
  o(function(){
    var width = window.innerWidth;
    var height = window.innerHeight;
    var doc = o(document);
  
    // .onload
    o('html').addClass('onload');
  
    // top link
    o('#top').click(function(e){
      o('body').animate({ scrollTop: 0 }, 'fast');
      e.preventDefault();
    });
  
    // scrolling links
    var added;
    doc.scroll(function(e){
      if (doc.scrollTop() &gt; 5) {
        if (added) return;
        added = true;
        o('body').addClass('scroll');
      } else {
        o('body').removeClass('scroll');
        added = false;
      }
    })
  
    // highlight code
    o('pre.js code').each(function(){
      o(this).html(highlight(o(this).text()));
    })
  })
  
  // active menu junk
  
  o(function(){
    var prev;
    var n = 0;
  
    var headings = o('h3').map(function(i, el){
      return {
        top: o(el).offset().top,
        id: el.id
      }
    });
  
    function closest() {
      var h;
      var top = o(window).scrollTop();
      var i = headings.length;
      while (i--) {
        h = headings[i];
        if (top &gt;= h.top - 1) return h;
      }
    }
  
    o(document).scroll(function(){
      var h = closest();
      if (!h) return;
  
      if (prev) {
        prev.removeClass('active');
        prev.parent().parent().removeClass('active');
      }
  
      var a = o('a[href="#' + h.id + '"]');
      a.addClass('active');
      a.parent().parent().addClass('active');
  
      prev = a;
    })
  })
  
  /**
   * Highlight the given `js`.
   */
  
  function highlight(js) {
    return js
      .replace(/&lt;/g, '&amp;lt;')
      .replace(/&gt;/g, '&amp;gt;')
      .replace(/\/\/(.*)/gm, '&lt;span class="comment"&gt;//$1&lt;/span&gt;')
      .replace(/('.*?')/gm, '&lt;span class="string"&gt;$1&lt;/span&gt;')
      .replace(/(\d+\.\d+)/gm, '&lt;span class="number"&gt;$1&lt;/span&gt;')
      .replace(/(\d+)/gm, '&lt;span class="number"&gt;$1&lt;/span&gt;')
      .replace(/\bnew *(\w+)/gm, '&lt;span class="keyword"&gt;new&lt;/span&gt; &lt;span class="init"&gt;$1&lt;/span&gt;')
      .replace(/\b(function|new|throw|return|var|if|else)\b/gm, '&lt;span class="keyword"&gt;$1&lt;/span&gt;')
  }
  </code></pre>
  
  <p>Setting this in place, wouldn't makes appear the arrow on scroll of page. How to fix this, please ?</p>