CodePen Embed - Smooth Scroll Towards :target

<!-- doesn't work on Safari -->

<a href="#infinity">To Infinity!</a>

<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not yet</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not yet</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not yet</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not yet</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not yet</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>
<p>Not infinity</p>

<p id="infinity">∞ 👋</p>

[id] {
	font-size:2em;
}

body {
	padding: 2rem;
}

a {
	color:#F5D27C;
}

html {
	color:#BFC6D4;
	background:#192229;	
}

View Compiled

console.clear();

// This works on Firefox and Chrome

// Everytime someone clicks on something
document.body.addEventListener('click', e => {
  
  const href = e.target.href;
  
  // no href attribute, no need to continue then
  if (!href) return;
  
  const id = href.split('#').pop();
  const target = document.getElementById(id);
  
  // no target to scroll to, bail out
  if (!target) return;
  
  // prevent the default quick jump to the target
  e.preventDefault();
  
  // set hash to window location so history is kept correctly
  history.pushState({}, document.title, href);
  
  // smooooooth scroll to the target!
  target.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });

});

This Pen is owned by Rik Schennink on CodePen.

See more by @rikschennink on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.