通过javascript事件构建css属性

我试图显示一个箭头，在单击时将用户引导到页面顶部：

html代码

<a id="top" href="#"><img src="/img/arrow.png"></a>

js代码

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() > 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 >= 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(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/\/\/(.*)/gm, '<span class="comment">//$1</span>')
    .replace(/('.*?')/gm, '<span class="string">$1</span>')
    .replace(/(\d+\.\d+)/gm, '<span class="number">$1</span>')
    .replace(/(\d+)/gm, '<span class="number">$1</span>')
    .replace(/\bnew *(\w+)/gm, '<span class="keyword">new</span> <span class="init">$1</span>')
    .replace(/\b(function|new|throw|return|var|if|else)\b/gm, '<span class="keyword">$1</span>')
}

---

将此设置到位，不会使箭头出现在页面的滚动条上。请问如何解决这个问题？

半小时前你不是问过同样的问题吗？如果您放弃了这个问题，请删除它。请将CSS添加到代码示例中，或者更好地准备示例

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() > 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 >= 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(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/\/\/(.*)/gm, '<span class="comment">//$1</span>')
    .replace(/('.*?')/gm, '<span class="string">$1</span>')
    .replace(/(\d+\.\d+)/gm, '<span class="number">$1</span>')
    .replace(/(\d+)/gm, '<span class="number">$1</span>')
    .replace(/\bnew *(\w+)/gm, '<span class="keyword">new</span> <span class="init">$1</span>')
    .replace(/\b(function|new|throw|return|var|if|else)\b/gm, '<span class="keyword">$1</span>')
}