Named anchors in a horizontal layout

Question

In a site I'm developing, I have a bunch of different sized images laid out in a horizontal layout. I have some named anchor links that jump to specific images when clicked, too. If a click on the links, I need that the selected image to be in the center of the page, not at the end. Is there any way to add some negative offset to the anchors?

Thanks in advance

HTML:

<a href="#item-9">Link to item 9</a>
<div class="carousel-frame">
  <ul>
    <li id="item-1" class="carousel-item">
      <span>1</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-2" class="carousel-item">
      <span>2</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-3" class="carousel-item">
      <span>3</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-4" class="carousel-item">
      <span>4</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-5" class="carousel-item">
      <span>5</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-6" class="carousel-item">
      <span>6</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-7" class="carousel-item">
      <span>7</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-8" class="carousel-item">
      <span>8</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-9" class="carousel-item">
      <span>9</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-10" class="carousel-item">
      <span>10</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-11" class="carousel-item">
      <span>11</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-12" class="carousel-item">
      <span>12</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-13" class="carousel-item">
      <span>13</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-14" class="carousel-item">
      <span>14</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-15" class="carousel-item">
      <span>15</span>
      <img src="http://placehold.it/200x150" />
    </li>
    <li id="item-16" class="carousel-item">
      <span>16</span>
      <img src="http://placehold.it/200x150" />
    </li>
  </ul>
</div>

CSS:

.carousel-frame {
  width: 100%;
  margin-bottom: 0.5em;
  padding-bottom: 1em;
  position: relative;
  white-space: nowrap;
}
.carousel-frame ul {
  margin: 0;
  padding: 0;
  height: 100%;
  list-style: none;
}
.carousel-frame li.carousel-item {
  cursor: pointer;
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 0;
}
.carousel-frame li.carousel-item span {
  display: block;
}

Here's a fiddle:

https://jsfiddle.net/z4524opd/2/

Answer 1

You can use animate:

$('a[href^="#item-"]').on('click', function(e) {
  e.preventDefault();

  // select the carousel-frame
  var divCarousel = $('.carousel-frame');

  // select the corresponding carousel-item
  var objToMove = divCarousel.find(this.getAttribute('href'));

  // compute the new left position
  var newPos = (objToMove.position().left - divCarousel.width())  +  (divCarousel.width() + objToMove.width()) / 2;

  // move to the new position
  divCarousel.animate({left: -newPos}, 2000);
})

.carousel-frame {
  width: 100%;
  margin-bottom: 0.5em;
  padding-bottom: 1em;
  position: relative;
  white-space: nowrap;
}
.carousel-frame ul {
  margin: 0;
  padding: 0;
  height: 100%;
  list-style: none;
}
.carousel-frame li.carousel-item {
  cursor: pointer;
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 0;
}
.carousel-frame li.carousel-item span {
  display: block;
}

a {
  text-decoration: none; font: menu;
  display: inline-block; padding: 2px 8px;
  background: ButtonFace; color: ButtonText;
  border-style: solid; border-width: 2px;
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#item-1"> item 1</a>
<a href="#item-2"> item 2</a>
<a href="#item-3"> item 3</a>
<a href="#item-4"> item 4</a>
<a href="#item-5"> item 5 </a>
<a href="#item-6"> item 6</a>
<a href="#item-7"> item 7</a>
<a href="#item-8"> item 8</a>
<a href="#item-9"> item 9</a>
<a href="#item-10"> item 10</a>
<a href="#item-11"> item 11</a>
<a href="#item-12"> item 12</a>
<a href="#item-13"> item 13</a>
<a href="#item-14"> item 14</a>
<a href="#item-15"> item 15</a>
<a href="#item-16"> item 16</a>
<div class="carousel-frame">
    <ul>
        <li id="item-1" class="carousel-item">
            <span>1</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-2" class="carousel-item">
            <span>2</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-3" class="carousel-item">
            <span>3</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-4" class="carousel-item">
            <span>4</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-5" class="carousel-item">
            <span>5</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-6" class="carousel-item">
            <span>6</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-7" class="carousel-item">
            <span>7</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-8" class="carousel-item">
            <span>8</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-9" class="carousel-item">
            <span>9</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-10" class="carousel-item">
            <span>10</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-11" class="carousel-item">
            <span>11</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-12" class="carousel-item">
            <span>12</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-13" class="carousel-item">
            <span>13</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-14" class="carousel-item">
            <span>14</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-15" class="carousel-item">
            <span>15</span>
            <img src="http://placehold.it/200x150" />
        </li>
        <li id="item-16" class="carousel-item">
            <span>16</span>
            <img src="http://placehold.it/200x150" />
        </li>
    </ul>
</div>