{"id":2308,"date":"2014-08-02T23:40:35","date_gmt":"2014-08-02T23:40:35","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=2308"},"modified":"2014-08-04T14:46:59","modified_gmt":"2014-08-04T14:46:59","slug":"slightly-fragment-id-scrolling","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/slightly-fragment-id-scrolling\/","title":{"rendered":"Slightly better fragment id scrolling"},"content":{"rendered":"<p>Disclaimer: This is a useless post to point out and solve a very minor annoyance. That annoyance being how the browser &#8220;scrolls&#8221; to content based on the URL&#8217;s <strong>fragment identifier<\/strong>.<\/p>\n<p>Specifically, I speak of that fact that whichever <strong>DOM id or anchor tag<\/strong> is targeted by the fragment identifier <strong>is brought to the very<\/strong> <strong>top of the viewport without any upper padding<\/strong>.<\/p>\n<p>I&#8217;d like to see a little padding between the targeted element and the top of the viewport. But, instead of wasting my time making silly suggestions to browser vendors, I decided to write a dozen lines of JavaScript to scratch my itch.<\/p>\n<p>Basically, the JavaScript determines if a fragment identifier is present in the URL. If found, once the the window onload event fires, the browser window is vertically scrolled by 20 pixels to give a little breathing room between the top of the viewport and the content.<\/p>\n<p>That&#8217;s it! Here&#8217;s the code, and sorry to waste your time with this nonsense \ud83d\ude09<\/p>\n<pre class=\"prettyprint\"><code>\r\nfunction betterFrag() {\r\n\r\n  var PADDING = 20;\r\n\r\n  function getScrollY() {\r\n      var scrOfY = 0;\r\n      if( typeof( window.pageYOffset ) == 'number' ) {\r\n        scrOfY = window.pageYOffset;\r\n      } else if( document.body &amp;&amp; \r\n        ( document.body.scrollLeft || document.body.scrollTop ) ) {\r\n        scrOfY = document.body.scrollTop;\r\n      } else if( document.documentElement &amp;&amp; \r\n        ( document.documentElement.scrollLeft || \r\n        document.documentElement.scrollTop ) ) {\r\n        scrOfY = document.documentElement.scrollTop;\r\n      }\r\n      return scrOfY;\r\n    }\r\n\r\n  var y = getScrollY();\r\n  if (y &gt; 0)\r\n    window.scroll(0, y - PADDING);\r\n  }\r\n\r\nif (location.hash) {\r\n  window.onload = betterFrag;\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Don&#8217;t bother reading this post. It satisfies a personal itch and will appeal to maybe 1% of the webdev crowd. I&#8217;ll do better next time!<\/p>\n","protected":false},"author":1,"featured_media":2311,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[5],"tags":[287,288],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2308"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=2308"}],"version-history":[{"count":10,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2308\/revisions"}],"predecessor-version":[{"id":2319,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2308\/revisions\/2319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media\/2311"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=2308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=2308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=2308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}