{"id":1812,"date":"2017-03-23T11:44:50","date_gmt":"2017-03-23T06:14:50","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1812"},"modified":"2018-10-24T11:31:07","modified_gmt":"2018-10-24T06:01:07","slug":"css-offsetting-html-anchor-adjust-fixed-header","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/css-offsetting-html-anchor-adjust-fixed-header\/","title":{"rendered":"Offsetting an html anchor to adjust for fixed header"},"content":{"rendered":"<h2 id=\"problem\"><span style=\"color: #ff6600;\"><label class=\"label label-warning\">PROBLEM:<\/label><\/span><\/h2>\n<p>Offsetting an html <a href=\"https:\/\/www.wikitechy.com\/technology\/how-to-use-name-or-id-in-html-anchor\/\" target=\"_blank\" rel=\"noopener\">anchor<\/a> to adjust for fixed header?<\/p>\n<h3 id=\"solution-1\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 1:<\/label><\/span><\/h3>\n<ul>\n<li>You could use CSS without any <a href=\"https:\/\/www.wikitechy.com\/technology\/loop-through-an-array-in-javascript\/\" target=\"_blank\" rel=\"noopener\">javascript<\/a>.<\/li>\n<li>Give your anchor a class:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML CODE<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">=&quot;&lt;a classanchor&quot; id=&quot;top&quot;&gt;&lt;\/a&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li>You can then position the anchor with an offset higher or lower than where it actually appears on the page, by making it a block element by relatively positioning it. -250px will position the anchor upto 250px<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">a.anchor <br\/>{<br\/>    display: block;<br\/>    position: relative;<br\/>    top: -250px;<br\/>    visibility: hidden;<br\/>}<\/code><\/pre> <\/div>\n<h3 id=\"solution-2\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 2:<\/label><\/span><\/h3>\n<ul>\n<li>This is another solution using <a href=\"https:\/\/www.wikitechy.com\/technology\/transitions-display-property\/\" target=\"_blank\" rel=\"noopener\">HTML\u00a0 code<\/a>\u00a0for offseting an html anchor:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML CODE<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;a name=&quot;mywikianchor&quot;&gt;<br\/>    &lt;h1 style=&quot;padding-top: 40px; margin-top: -40px;&quot;&gt;My anchor&lt;\/h1&gt;<br\/>&lt;\/a&gt;<\/code><\/pre> <\/div>\n<ul>\n<li>This doesn&#8217;t create any gap in the content and anchor links works.<\/li>\n<\/ul>\n<h3 id=\"solution-3\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 3:<\/label><\/span><\/h3>\n<h4 id=\"css-solution\"><span style=\"color: #0000ff;\"><b>CSS solution :<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">a[name] <br\/>{<br\/>  padding-top: 40px;<br\/>  margin-top: -40px;<br\/>  display: inline-block; \/* required for webkit browsers *\/<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>In <a href=\"https:\/\/www.wikitechy.com\/technology\/hiding-scrollbar-html-page\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a>, optionally you may want to add the following if the target is still off the screen:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\"> vertical-align: top;<\/code><\/pre> <\/div>\n<h3 id=\"solution-4\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 4:<\/label><\/span><\/h3>\n<ul>\n<li>This is one of the solution:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">*[id]:before <br\/>{ <br\/>  display: block; <br\/>  content: &quot; &quot;; <br\/>  margin-top: -75px; <br\/>  height: 75px; <br\/>  visibility: hidden; <br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<h3 id=\"solution-5\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 5:<\/label><\/span><\/h3>\n<h4 id=\"html\"><span style=\"color: #800000;\"><b>\u00a0HTML :<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML CODE<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div id=&quot;#anchor&quot;&gt;&lt;\/div&gt; &lt;!-- #anchor here is the anchor tag which is on your URL --&gt;<\/code><\/pre> <\/div>\n<h4 id=\"javascript\"><span style=\"color: #993366;\"><b>JavaScript :<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">JAVASCRIPT CODE<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\"> $(function() <br\/>{<br\/>  $(&#039;a[href*=#]:not([href=#])&#039;).click(function() {<br\/>    if (location.pathname.replace(\/^\\\/\/,&#039;&#039;) == this.pathname.replace(\/^\\\/\/,&#039;&#039;) <br\/>&amp;&amp; location.hostname == this.hostname) <br\/>{<br\/>      var target = $(this.hash);<br\/>      target = target.length ? target : $(&#039;[name=&#039; + this.hash.slice(1) +&#039;]&#039;);<br\/>      if (target.length) <br\/>{<br\/>        $(&#039;html,body&#039;).animate(<br\/>{<br\/>          scrollTop: target.offset().top - 125 \/\/offsets for fixed header<br\/>        <br\/>}<br\/>, 1000);return false;     <br\/> }<br\/> } <br\/> });<br\/>  \/\/Executed on page load with URL containing an anchor tag.<br\/>  if($(location.href.split(&quot;#&quot;)[1])) <br\/>{<br\/>      var target = $(&#039;#&#039;+location.href.split(&quot;#&quot;)[1]);<br\/>      if (target.length) <br\/>{<br\/>        $(&#039;html,body&#039;).animate(<br\/>{<br\/>          scrollTop: target.offset().top - 125 \/\/offset height of header here too. }, 1000); return false;<br\/>}    }});<\/code><\/pre> <\/div>\n<h3 id=\"solution-6\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 6:<\/label><\/span><\/h3>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">a[id]:before <br\/>{<br\/>    content:&quot;&quot;;<br\/>    display:block;<br\/>    height:50px;<br\/>    margin:-30px 0 0;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li>That will append a pseudo-element before every a-tag with an id. Adjust values to match the height of your header.<\/li>\n<\/ul>\n<h3 id=\"solution-7\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 7:<\/label><\/span><\/h3>\n<ul>\n<li>For modern browsers, just add the CSS3 :target selector to the page. This will apply to all the anchors automatically.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">:target <br\/>{<br\/>    display: block;    <br\/>    position: relative;     <br\/>    top: -100px;<br\/>    visibility: hidden;<br\/>}<\/code><\/pre> <\/div>\n<h3 id=\"solution-8\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 8:<\/label><\/span><\/h3>\n<ul>\n<li>Adjust the height and the negative margin to the offset you need&#8230;<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">:target:before <br\/>{<br\/>    content: &quot;&quot;;<br\/>    display: inline-block;<br\/>    height: 180px;<br\/>    margin: -180px 0 0;<br\/>}<\/code><\/pre> <\/div>\n<h3 id=\"solution-9\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 9:<\/label><\/span><\/h3>\n<ul>\n<li>You can include a smooth-scroll effect to the anchor, while making it stop at -60px above the anchor, fitting nicely underneath the fixed bootstrap navigation bar (requires <a href=\"https:\/\/www.wikitechy.com\/technology\/solved-8-answers-jquery-disable-enable-input-jquery\/\" target=\"_blank\" rel=\"noopener\">jQuery<\/a>):<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">JAVASCRIPT CODE<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&quot;.dropdown-menu a[href^=&#039;#&#039;]&quot;).on(&#039;click&#039;, function(e) <br\/>{<br\/>   \/\/ prevent default anchor click behavior<br\/>   e.preventDefault();<br\/><br\/>   \/\/ animate<br\/>   $(&#039;html, body&#039;).animate(<br\/>{<br\/>       scrollTop: $(this.hash).offset().top - 60<br\/> }, 300, function()<br\/>{<br\/>     });<br\/>});<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<h3 id=\"solution-10\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 10:<\/label><\/span><\/h3>\n<ul>\n<li>We added 40px-height .wiki element holding the anchor before each h1 elements.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML CODE<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;wiki&quot; id=&quot;gherkin&quot;&gt;&lt;\/div&gt;<br\/>&lt;div class=&quot;page-header&quot;&gt;<br\/>  &lt;h1&gt;wikitechy&lt;\/h1&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<h4 id=\"css\"><span style=\"color: #800080;\"><b>CSS:<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.wiki <br\/>{<br\/> height: 40px;<br\/>}<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: Offsetting an html anchor to adjust for fixed header? SOLUTION 1: You could use CSS without any javascript. Give your anchor a class: [ad type=&#8221;banner&#8221;] You can then position the anchor with an offset higher or lower than where it actually appears on the page, by making it a block element by relatively positioning [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[3851,3847,3859,3858,3857,3846,3845,3856,3855,3854,3848,3850,3853,3849,3852],"class_list":["post-1812","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-anchor-links-with-a-fixed-header","tag-anchor-position-defijquery-offsetting-anchor-links-with-fixed-header","tag-anchor-position-reporting","tag-bootstrap-anchor-offset","tag-bootstrap-navbar-anchor-nition","tag-jquery-scroll-to-anchor-offset","tag-links","tag-make-anchor-link-go-some-pixels-above-where-its-linked-to","tag-offset-anchor-jquery","tag-offset-anchor-link-css","tag-offset-anchors-with-fixed-header","tag-offset-the-anchor-link-for-sticky-header","tag-problem-using-fixed-header","tag-problem-with-fixed-header-offsetting-an-html-anchor","tag-skip-to-main-content-problems"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1812"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1812\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}