Skip to content

Instantly share code, notes, and snippets.

@krawaller

krawaller/css_anchors.js

Created July 5, 2010 12:17
Show Gist options
  • Save krawaller/464296 to your computer and use it in GitHub Desktop.
Save krawaller/464296 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Anchors Shim
Raw
css_anchors.js
(function(){
var hash = decodeURIComponent((location.href.match(/#(.*)$/) || [])[1]);
if(hash){
var el = document.querySelector(hash), t = 0;
do { t += el.offsetTop; }
while (el.offsetParent && (el = el.offsetParent));
window.scrollTo(0, t);
}
})();
Raw
css_anchors.user.js
// ==UserScript==
// @name CSS Anchors
// @description Shim for CSS Anchors
// @version 0.01
// @author [email protected]
// @license MIT License
// @namespace http://blog.krawaller.se
// @include http://*
// ==/UserScript==
(function(){
var hash, el, t = 0;
if (window.pageYOffset == 0 && (hash = (location.href.match(/#(.*)$/) || [])[1]) && (el = document.querySelector(hash)) ) {
do { t += el.offsetTop; }
while (el.offsetParent && (el = el.offsetParent));
window.scrollTo(0, t);
}
})();
@krawaller
Copy link
Author

As a bookmarklet: javascript:(function(){var%20s%20=%20document.createElement('script');%20s.src%20=%20'http://gist.github.com/raw/464296/030e1af507c248af508dd817d44c42691890abd1/css_anchors.js';%20document.getElementsByTagName('head')[0].appendChild(s);})()

@litenjacob
Copy link

In Chrome, try clicking the raw link of css_anchors.user.js to install as a plugin. Then hit a page like http://en.wikipedia.org/wiki/Aral#a[href="/wiki/North_Aral_Sea"] to see it in action.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment