{"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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3D%22%3Ca%20classanchor%22%20id%3D%22top%22%3E%3C%2Fa%3E%0A\u201d message=\u201dHTML CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dcss\u201d manual=\u201da.anchor%20%0A%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20top%3A%20-250px%3B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ca%20name%3D%22mywikianchor%22%3E%0A%20%20%20%20%3Ch1%20style%3D%22padding-top%3A%2040px%3B%20margin-top%3A%20-40px%3B%22%3EMy%20anchor%3C%2Fh1%3E%0A%3C%2Fa%3E%0A\u201d message=\u201dHTML CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>This doesn\u2019t 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[pastacode lang=\u201dcss\u201d manual=\u201da%5Bname%5D%20%0A%7B%0A%20%20padding-top%3A%2040px%3B%0A%20%20margin-top%3A%20-40px%3B%0A%20%20display%3A%20inline-block%3B%20%2F*%20required%20for%20webkit%20browsers%20*%2F%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dcss\u201d manual=\u201d%20vertical-align%3A%20top%3B\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dcss\u201d manual=\u201d*%5Bid%5D%3Abefore%20%0A%7B%20%0A%20%20display%3A%20block%3B%20%0A%20%20content%3A%20%22%20%22%3B%20%0A%20%20margin-top%3A%20-75px%3B%20%0A%20%20height%3A%2075px%3B%20%0A%20%20visibility%3A%20hidden%3B%20%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20id%3D%22%23anchor%22%3E%3C%2Fdiv%3E%20%3C!\u2013%20%23anchor%20here%20is%20the%20anchor%20tag%20which%20is%20on%20your%20URL%20\u2013%3E%0A\u201d message=\u201dHTML CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"javascript\"><span style=\"color: #993366;\"><b>JavaScript :<\/b><\/span><\/h4>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%20%24(function()%20%0A%7B%0A%20%20%24(\u2018a%5Bhref*%3D%23%5D%3Anot(%5Bhref%3D%23%5D)\u2019).click(function()%20%7B%0A%20%20%20%20if%20(location.pathname.replace(%2F%5E%5C%2F%2F%2C\u201d)%20%3D%3D%20this.pathname.replace(%2F%5E%5C%2F%2F%2C\u201d)%20%0A%26%26%20location.hostname%20%3D%3D%20this.hostname)%20%0A%7B%0A%20%20%20%20%20%20var%20target%20%3D%20%24(this.hash)%3B%0A%20%20%20%20%20%20target%20%3D%20target.length%20%3F%20target%20%3A%20%24(\u2018%5Bname%3D\u2019%20%2B%20this.hash.slice(1)%20%2B\u2019%5D\u2019)%3B%0A%20%20%20%20%20%20if%20(target.length)%20%0A%7B%0A%20%20%20%20%20%20%20%20%24(\u2018html%2Cbody\u2019).animate(%0A%7B%0A%20%20%20%20%20%20%20%20%20%20scrollTop%3A%20target.offset().top%20-%20125%20%2F%2Foffsets%20for%20fixed%20header%0A%20%20%20%20%20%20%20%20%0A%7D%0A%2C%201000)%3Breturn%20false%3B%20%20%20%20%20%0A%20%7D%0A%20%7D%20%0A%20%7D)%3B%0A%20%20%2F%2FExecuted%20on%20page%20load%20with%20URL%20containing%20an%20anchor%20tag.%0A%20%20if(%24(location.href.split(%22%23%22)%5B1%5D))%20%0A%7B%0A%20%20%20%20%20%20var%20target%20%3D%20%24(\u2018%23\u2019%2Blocation.href.split(%22%23%22)%5B1%5D)%3B%0A%20%20%20%20%20%20if%20(target.length)%20%0A%7B%0A%20%20%20%20%20%20%20%20%24(\u2018html%2Cbody\u2019).animate(%0A%7B%0A%20%20%20%20%20%20%20%20%20%20scrollTop%3A%20target.offset().top%20-%20125%20%2F%2Foffset%20height%20of%20header%20here%20too.%20%7D%2C%201000)%3B%20return%20false%3B%0A%7D%20%20%20%20%7D%7D)%3B%0A\u201d message=\u201dJAVASCRIPT CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h3 id=\"solution-6\"><span style=\"color: #008000;\"><label class=\"label label-info\">SOLUTION 6:<\/label><\/span><\/h3>\n[pastacode lang=\u201dcss\u201d manual=\u201da%5Bid%5D%3Abefore%20%0A%7B%0A%20%20%20%20content%3A%22%22%3B%0A%20%20%20%20display%3Ablock%3B%0A%20%20%20%20height%3A50px%3B%0A%20%20%20%20margin%3A-30px%200%200%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dcss\u201d manual=\u201d%3Atarget%20%0A%7B%0A%20%20%20%20display%3A%20block%3B%20%20%20%20%0A%20%20%20%20position%3A%20relative%3B%20%20%20%20%20%0A%20%20%20%20top%3A%20-100px%3B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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\u2026<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Atarget%3Abefore%20%0A%7B%0A%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20height%3A%20180px%3B%0A%20%20%20%20margin%3A%20-180px%200%200%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201djavascript\u201d manual=\u201d%24(%22.dropdown-menu%20a%5Bhref%5E%3D\u2019%23\u2019%5D%22).on(\u2018click\u2019%2C%20function(e)%20%0A%7B%0A%20%20%20%2F%2F%20prevent%20default%20anchor%20click%20behavior%0A%20%20%20e.preventDefault()%3B%0A%0A%20%20%20%2F%2F%20animate%0A%20%20%20%24(\u2018html%2C%20body\u2019).animate(%0A%7B%0A%20%20%20%20%20%20%20scrollTop%3A%20%24(this.hash).offset().top%20-%2060%0A%20%7D%2C%20300%2C%20function()%0A%7B%0A%20%20%20%20%20%7D)%3B%0A%7D)%3B%0A\u201d message=\u201dJAVASCRIPT CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22wiki%22%20id%3D%22gherkin%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22page-header%22%3E%0A%20%20%3Ch1%3Ewikitechy%3C%2Fh1%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dHTML CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"css\"><span style=\"color: #800080;\"><b>CSS:<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d.wiki%20%0A%7B%0A%20height%3A%2040px%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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: [pastacode lang=\u201dmarkup\u201d manual=\u201d%3D%22%3Ca%20classanchor%22%20id%3D%22top%22%3E%3C%2Fa%3E%0A\u201d message=\u201dHTML CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] [ad type=\u201dbanner\u201d] You can then position the anchor with an offset higher or lower than where it actually appears on the page, by making [&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}]}}