Skip to content

Instantly share code, notes, and snippets.

@RobVanGroenewoud

RobVanGroenewoud/chrome-hash-workaround.html

Created May 16, 2017 21:09
Show Gist options
  • Save RobVanGroenewoud/81b6b1f126086c67d3d5558ae55caa41 to your computer and use it in GitHub Desktop.
Save RobVanGroenewoud/81b6b1f126086c67d3d5558ae55caa41 to your computer and use it in GitHub Desktop.
Download ZIP
Quick Chrome fix to scroll to url hash
Raw
chrome-hash-workaround.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 20em;
margin: 2em auto;
}
nav {
position: fixed;
top: 0;
}
</style>
</head>
<body>
<nav>
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#four">Four</a>
</nav>
<p id="one"><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet sapiente asperiores autem perspiciatis voluptas assumenda, sit. Dignissimos vero voluptate at, nesciunt nostrum recusandae consequuntur aliquid doloribus. Vero fugit suscipit, ipsam quae, laboriosam maxime eos ut minima, quidem laudantium veniam iusto eligendi corporis, natus. Eos, cupiditate, temporibus. Nemo, nisi consectetur!</p>
<p id="two"><strong>2</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet sapiente asperiores autem perspiciatis voluptas assumenda, sit. Dignissimos vero voluptate at, nesciunt nostrum recusandae consequuntur aliquid doloribus. Vero fugit suscipit, ipsam quae, laboriosam maxime eos ut minima, quidem laudantium veniam iusto eligendi corporis, natus. Eos, cupiditate, temporibus. Nemo, nisi consectetur!</p>
<p id="three"><strong>3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet sapiente asperiores autem perspiciatis voluptas assumenda, sit. Dignissimos vero voluptate at, nesciunt nostrum recusandae consequuntur aliquid doloribus. Vero fugit suscipit, ipsam quae, laboriosam maxime eos ut minima, quidem laudantium veniam iusto eligendi corporis, natus. Eos, cupiditate, temporibus. Nemo, nisi consectetur!</p>
<p id="four"><strong>4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet sapiente asperiores autem perspiciatis voluptas assumenda, sit. Dignissimos vero voluptate at, nesciunt nostrum recusandae consequuntur aliquid doloribus. Vero fugit suscipit, ipsam quae, laboriosam maxime eos ut minima, quidem laudantium veniam iusto eligendi corporis, natus. Eos, cupiditate, temporibus. Nemo, nisi consectetur!</p>
<script>
var el = window.location.hash && document.querySelector(window.location.hash);
if (typeof chrome !== 'undefined' && el) {
document.body.scrollTop = el.offsetTop;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment