title: Need to make anchor tag to go to specific id while making space for the fixed header
body: <p>My app's <code>&quot;/&quot;</code> route has a carousel of images, each with a dynamically generated anchor tag that points to where the image lives on another route (1 of 4 possible routes).  The tag pulls up the page with the image but the fixed header gets in the way, and I want the image to be more or less in the middle of the page instead of the very top.  I have looked at solutions to this problem:</p>
  <p><a href="https://stackoverflow.com/questions/11386807/adding-an-automatic-offset-to-the-scroll-position-for-all-hash-links-calls">Adding an automatic offset to the scroll position for all hash-links/calls</a></p>
  <p><a href="https://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to">Make anchor link go some pixels above where it&#39;s linked to</a></p>
  <p>These solutions all involve adding padding or margin to the element to push the content down past the header, but that isn't an option for me because of how the content is arranged (very close to each other).  The other solutions involve using javascript to add an event listener or make the page scroll up from the href target, but I don't think I can use client-side javascript to reference another route on my server.</p>
  <p>Can any of these solutions be manipulated to work for my specific use case?  I am using node.js with an express server, and my pages are templated with ejs, and I do have bootstrap installed.  Here is the code that generates the anchor tag on the root route:</p>
  <pre><code>&lt;%  artWorks.forEach(function(artWork) { %&gt;
        &lt;% var randomArt = Math.floor(Math.random()*artWorks.length) %&gt;
          &lt;div class=&quot;carousel-item container-fluid&quot;&gt;
            &lt;a href=&lt;%= artWorks[randomArt].imgCategory %&gt;#&lt;%=artWorks[randomArt].alt%&gt; &gt;&lt;img loading=&quot;lazy&quot; class=&quot;img-fluid&quot; src=&quot;&lt;%= artWorks[randomArt].thumbnail %&gt;&quot; class=&quot;d-block w-100&quot;/&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;% }); %&gt;
        &lt;/div&gt;
  </code></pre>