In my application, the homepage's carousel displays multiple images with dynamically generated anchor tags that link to different routes. When clicking on the anchor tag, the page scrolls to the linked image but is obstructed by a fixed header. I want the linked image to be positioned more centrally on the page rather than at the very top. I have explored various solutions to address this issue:
Adding an automatic offset to the scroll position for all hash-links/calls
Make anchor link go some pixels above where it's linked to
These solutions typically involve adjusting padding or margin properties of the element to push the content below the fixed header. However, due to the close arrangement of the elements in my layout, this approach is not feasible. Other suggestions include using JavaScript to manipulate the scrolling behavior, but integrating client-side scripting to reference another route on the server may pose challenges.
Is there a way to modify any of these solutions to suit my specific scenario? My application is built using node.js and express server, utilizes EJS templates, and incorporates Bootstrap framework. Below is a snippet of code responsible for generating the anchor tag on the homepage:
<% artWorks.forEach(function(artWork) { %>
<% var randomArt = Math.floor(Math.random()*artWorks.length) %>
<div class="carousel-item container-fluid">
<a href=<%= artWorks[randomArt].imgCategory %>#<%=artWorks[randomArt].alt%> ><img loading="lazy" class="img-fluid" src="<%= artWorks[randomArt].thumbnail %>" class="d-block w-100"/></a>
</div>
<% }); %>
</div>