0

I have the following image map that relate to anchor points in this table.

<table id="itemslist" class="table">
  <tbody>
    <tr data-position="1">
      <td>Position<a name="anchor1"></a></td>
      <td>1</td>
    </tr>
    <tr data-position="2">
      <td>Position<a name="anchor2"></a></td>
      <td>1</td>
    </tr>
  </tbody>
</table>

<map name="imgMap">
<area shape="rect" coords="465,140,485,159" href="#anchor1">
<area shape="rect" coords="112,161,131,180" href="#anchor2">
</map>

When the user click one position the page scroll to where that anchor is. But I need the page to scroll a little higher up and I cannot move the html anchor points. How can I accomplish this using jQuery?

Is it possible to iterate over each anchor element in the table and use jQuery to scroll to that position minus a value?

for example..

function scrollToAnchor(id) {
  var aTag = jQuery("a[name='"+ id +"']");

  jQuery('html,body').animate(
   {
    scrollTop: aTag.offset().top - 150
   },'fast');
  
};
MTplus
  • 2,077
  • 4
  • 34
  • 51
  • Does this answer your question? [Make anchor link go some pixels above where it's linked to](https://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to)? (Personally I'm a fan of [the CSS-only answer](https://stackoverflow.com/a/22095246/1650337)) – DBS Jun 21 '22 at 09:06
  • Thanks, I ended up using this style="position:absolute; top:-100px;" that works fine, simple and works :) – MTplus Jun 21 '22 at 09:29

0 Answers0