javascript - 在 H2 标题上使用::after 显示 "up"箭头以返回页面顶部。单击时如何使其引用 ？

Question

h2::after {
    content: '\25b2';
    position: absolute;
    right: 20px;
    font-size:1.2em;
    cursor: pointer;   
}

<h2>Example</h2>

这是我的。我想让它在单击向上箭头时返回到页面顶部。我已经在内容的开头定义了。我怎样才能做到这一点？我更喜欢直接的 CSS，但如果这是唯一的方式，JS 也是可以接受的。

Answer 1

正如其他人所建议的那样。看看下面的例子。这个例子确实使用了 es6 函数，这意味着如果你想要的话，你需要像 bable 这样的东西才能在 IE 中使用它。

const headers = Array.from( document.querySelectorAll('h2') );

headers.forEach( header => {
  header.insertAdjacentHTML('afterbegin', 
   '<a href="#">&#x25B2;</a>'
  );
});

h2 a {
  position: absolute;
  right: 20px;
  font-size:1.2em;
  text-decoration: none;
  color: black;
}

<h2>Example1</h2>
<h2>Example2</h2>
<h2>Example3</h2>