Использование :: after в заголовке H2 для отображения стрелки «вверх» для возврата в начало страницы. Как мне сделать ссылку на <a name=> при нажатии?

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>